* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.5vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-regular);  -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;}
p:last-of-type { margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "Neue Haas Grotesk Display Pro", system-ui, sans-serif;
    --header-font: "Neue Haas Grotesk Display Pro", system-ui, sans-serif;
    --fancy-font: "Funnel Display", system-ui, sans-serif;

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

    /* Font sizes */
    --font-size-huge: 7rem;     /* 140px */
    --font-size-h1: 4.8rem;     /* 96px */
    --font-size-h2: 3.2rem;     /* 64px */
    --font-size-h3: 2.7rem;     /* 54px */
    --font-size-h4: 2rem;       /* 40px */
    --font-size-h5: 1.4rem;     /* 28px */
    --font-size-h6: 1.2rem;     /* 24px */
    --font-size-body: 1.2rem;   /* 24px */
    --font-size-medium: 1rem;   /* 20px */
    --font-size-little: .9rem;  /* 18px */
    --font-size-tiny: .8rem;    /* 16px */

    /* Colors */  
    --mainColor: black;
    --backgroundColor: white;

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

    --myWhite: #FFF; 
    --myBlack: #000; 
    
    --myWhite-100: rgba(255,255,255,1); 
    --myWhite-70: rgba(255,255,255,0.7); 
    --myWhite-40: rgba(255,255,255,0.4); 
    --myWhite-15: rgba(255,255,255,0.15); 
    
    --myPurple: #B45AFF; 
    --myPurple-100: var(--myPurple); 
    --myPurple-70: #C688FB; 
    --myPurple-40: #E1BDFF; 
    --myPurple-15: #F4E6FF; 
    
    --myBlue: #008CC8; 
    --myBlue-100: var(--myBlue); 
    --myBlue-70: #4DAFD9;
    --myBlue-40: #99D1E9;
    --myBlue-15: #D9EEF7;
    
    --myBeige: #E4E1CD; 
    --myBeige-100: var(--myBeige); 
    --myBeige-70: #ECEADC;
    --myBeige-40: #F4F3EB;
    --myBeige-15: #FBFBF8;
    
    --myPink: #FF64C8; 
    --myPink-100: var(--myPink);
    --myPink-70: #FF92D8;
    --myPink-40: #FFC1E9;
    --myPink-15: #FFE8F7;    
    
    --myGreen: #50AA5A; 
    --myGreen-100: var(--myGreen);
    --myGreen-70: #84C38B;
    --myGreen-40: #B9DDBD;
    --myGreen-15: #E5F2E6;

    /* Blocks */
    --cols: 8; 
    --pixel: round(calc(100vw / var(--cols)), .01px); 
    --pixel-half: calc(var(--pixel) / 2);
    --pixel-neg: calc(var(--pixel) * -1);
    --pixel-2: calc(var(--pixel) * 2);
    --pixel-3: calc(var(--pixel) * 3);
    --pixel-4: calc(var(--pixel) * 4);
    --pixel-5: calc(var(--pixel) * 5);
    --pixel-6: calc(var(--pixel) * 6);
    --pixel-7: calc(var(--pixel) * 7);
    --pixel-8: calc(var(--pixel) * 8);
    --pixel-9: calc(var(--pixel) * 9);
    --pixel-10: calc(var(--pixel) * 10);

    /* Line heights */
    --line-height-extra-small: 1;
    --line-height-small: 1.15;
    --line-height-regular: 1.4;
    --line-height-large: 1.6; 

  /* Widths */
    --gutter-side: var(--pixel);
    --gutter-side-cuddle: var(--font-size-body); 
    --gutter-top: 1rem;
    --max-width: calc(var(--pixel) * calc(var(--cols) - 2));
    --max-width-ultra-wide: 110rem;
    --max-width-hug: calc(var(--pixel) * var(--cols));
    --max-width-contained: calc(var(--pixel) * 22);
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: var(--pixel); 


    /* Margins */
    --margin: var(--pixel) auto;
    --padding-top: var(--pixel); 
    --btn-padding: 1em;

    /* Transitions */
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1em; 

    /* Logos */
    --logo-width: 5rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-regular); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; }
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); } 
h6, .h6 {font-size: var(--font-size-h6); } 

/* --------------- COLORS --------------- */
.white { --ownColor: var(--myWhite); --ownColor-70: var(--myWhite-70); --ownColor-40: var(--myWhite-40); --ownColor-15: var(--myWhite-15);  }
.purple { --ownColor: var(--myPurple); --ownColor-70: var(--myPurple-70); --ownColor-40: var(--myPurple-40); --ownColor-15: var(--myPurple-15);  }
.blue { --ownColor: var(--myBlue); --ownColor-70: var(--myBlue-70); --ownColor-40: var(--myBlue-40); --ownColor-15: var(--myBlue-15);  }
.beige { --ownColor: var(--myBeige); --ownColor-70: var(--myBeige-70); --ownColor-40: var(--myBeige-40); --ownColor-15: var(--myBeige-15);  }
.pink { --ownColor: var(--myPink); --ownColor-70: var(--myPink-70); --ownColor-40: var(--myPink-40); --ownColor-15: var(--myPink-15);  }
.green { --ownColor: var(--myGreen); --ownColor-70: var(--myGreen-70); --ownColor-40: var(--myGreen-40); --ownColor-15: var(--myGreen-15);  }


/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
body[data-scrollable=false], body.menu-open { overflow: hidden;}
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#fixed, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; display: flex; flex-direction: column;  min-height: calc(var(--rows, 0) * var(--pixel)); }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }
section.cuddle .container { width: calc(100% - var(--gutter-side-cuddle) * 2);  max-width: 100%; }
section.hug .container { width: 100%; max-width: 100%; }
section:not(.intro):first-of-type .container { margin-top: var(--pixel-2);}
.boxed { min-height: calc(var(--box-rows, 0) * var(--pixel));}
.box-shrink { height: calc(var(--box-rows) * var(--pixel));}
footer { min-height: calc(var(--rows, 0) * var(--pixel)); flex-direction: column; display: flex; }

/* IMAGES */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
picture.box-shrink { display: flex; align-items: center;  overflow: hidden; }
picture.box-shrink img { object-fit: cover;}
img, video { width: 100%; height: auto; user-select: none; }

/* SELECTION */
*::selection { background: var(--mainColor); color: var(--backgroundColor); }

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

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }
.button { background: var(--myWhite); color: var(--myBlack);  display: flex; justify-content: flex-end;  font-size: var(--font-size-h5); margin: 0 var(--pixel) 0 auto; min-width: calc(var(--box-cols) * var(--pixel)); transition: background 333ms var(--my-ease); }
.button > span {  display: flex; align-items: center; justify-content: flex-end;  padding-left: var(--btn-padding);  transition: transform 333ms var(--my-ease);}
.button svg { width: var(--pixel); height: var(--pixel); padding: calc(var(--pixel) / 3.5); flex-shrink: 0; display: flex; justify-content: center;  margin-left: auto;  transition: transform 333ms var(--my-ease);}
.target:hover .button,
.button:hover { background: var(--ownColor-40); }
.target:hover .button span,
.button:hover span { transform: translateX(.1em);}
.target:hover .button svg,
.button:hover svg { transform: translate(.1em, -.1em);}


.arrow { background: var(--myWhite);}
.arrow svg { width: var(--pixel); height: var(--pixel); padding: calc(var(--pixel) / 3.5); display: flex; justify-content: center; transition: transform 333ms var(--my-ease);}

.target:hover .arrow svg, 
:is(a,button).arrow:hover svg { transform: translate(.1em, -.1em); }

.btn { font-size: var(--font-size-tiny); text-decoration: underline; text-underline-offset: .2em; display: inline-block;  white-space: nowrap;}
.btn span { display: inline; }
.btn.regular:not(:hover) { text-decoration: none;}

.tag { font-size: var(--font-size-tiny); background: var(--myWhite); color: var(--myBlack); padding: .25em .75em;  max-width: max-content;}

.h1.has-glitch { font-family: var(--fancy-font); line-height: var(--line-height-extra-small); display: flex; flex-direction: column; align-items: flex-start; }
.glitched { min-height: calc(var(--line-height-small) * 1em); font-family: var(--fancy-font);}

/* =========================================================== */
/* ========================= PIXELS ========================== */
/* =========================================================== */
.pixels, .has-own-grid .pixel-grid { pointer-events: none;}
.pixels canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pixel-grid { position: absolute; left: 0; top: 0;  width: 100%; height: 100%; display: grid; grid-template-columns: repeat(var(--cols), var(--pixel)); grid-template-rows: repeat(var(--rows), var(--pixel));  overflow: hidden; }
.pixel-grid > span { width: var(--pixel); height: var(--pixel); position: absolute; grid: var(--row) var(--col); image-rendering: pixelated; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; backface-visibility: hidden;   }

footer > .pixel {  pointer-events: none; width: var(--pixel); height: var(--pixel);  position: absolute; top: 0; left: 0; opacity: 0;}


@media only screen and (min-width: 600px) {
    :root { --cols: 10; }
}
@media only screen and (min-width: 800px) {
    :root { --cols: 12; }
}
@media only screen and (min-width: 1200px) {
    :root { --cols: 18; }
}
@media only screen and (min-width: 1600px) {
    :root { --cols: 22; }
}
@media only screen and (min-width: 2100px) {
    :root { --cols: 26; }
    .contained.contained.contained { max-width: var(--max-width-contained);}
}
@media only screen and (min-width: 2640px) {
    :root { --pixel: calc(2640px / 30); }
}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; display: flex; align-items: flex-start; left: 0; right: 0; margin: 0 auto;  pointer-events: none;}
header.front { z-index: 100; }
header img, header svg { max-width: 100%;}

/* DESKTOP NAV */
nav#fixed { margin: 0 auto; padding: 0;  z-index: 10;  }
nav#fixed > ul { display: flex; justify-content: flex-end; align-items: flex-start;}
nav#fixed > ul li {position: relative; display: flex; pointer-events: all;  transition: opacity 1000ms var(--my-ease) }
nav#fixed > ul li a { display: flex;  -webkit-tap-highlight-color: transparent;}

/* LOGO */
nav#fixed > ul > li.logo {margin-right: auto; width: calc(var(--pixel) * 1); height: calc(var(--pixel) * 1);   background: var(--logoColor, var(--myWhite));  position: relative;  }
nav#fixed > ul > li.logo > a {  position: relative; z-index: 2;  width: 100%; height: 100%; }
nav#fixed > ul > li.logo > a svg { padding: .5rem; transform-origin: top left;  transition: transform 333ms var(--my-ease) 166ms;   height: auto;  transform: scale(2); }

nav#fixed > ul > li.logo::before,nav#fixed > ul > li.logo::after, nav#fixed > ul > li.logo::before,nav#fixed > ul > li.logo > span { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--logoColor, var(--myWhite));   transition: opacity 333ms var(--my-ease)}
nav#fixed > ul > li.logo::before { left: var(--pixel); transition: opacity 333ms var(--my-ease) 125ms;  }
nav#fixed > ul > li.logo::after { top: var(--pixel); }
nav#fixed > ul > li.logo > span { left: var(--pixel); top: var(--pixel);  transition-delay: 150ms;}

body.loading nav#fixed > ul > li.logo > a svg { transition: 0s;}
body.loading nav#fixed > ul > li.logo::before,body.loading nav#fixed > ul > li.logo::after, body.loading nav#fixed > ul > li.logo::before, body.loading nav#fixed > ul > li.logo > span, body.loading nav#fixed > ul > li.logo > a  { transition: 0s;}

:is(body.menu-open header, header[data-scrolled=true]) nav#fixed > ul > li.logo::before, :is(body.menu-open header, header[data-scrolled=true]) nav#fixed > ul > li.logo::after, :is(body.menu-open header, header[data-scrolled=true]) nav#fixed > ul > li.logo > span { opacity: 0;}
:is(body.menu-open header, header[data-scrolled=true]) nav#fixed > ul > li.logo > a svg { transform: none; transition-delay: 0ms;}

/* MOBILE NAV */
nav#main { position: fixed; top: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none;  z-index: 8; max-width: 100vw;}
nav#main .container { height: 100vh; width: 100%; max-width: 100%; margin: 0; overflow: auto;}
nav#main canvas { z-index: 2; }
nav#main ul.top {  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(9, var(--pixel)) 1fr; opacity: 0; transition: opacity 500ms var(--my-ease) 0ms; width: 100%; position: relative; z-index: 2; border-top: 1px solid var(--myBlack); border-bottom: 1px solid var(--myBlack); margin-top: var(--pixel); } 
nav#main ul.top > li { display: flex; font-size: var(--font-size-h2); font-family: var(--fancy-font);  position: relative;  grid-row: span 2;}
nav#main ul.top > li > a {  display: flex; align-items: center;   padding-inline: var(--pixel); border-bottom: 1px solid var(--myBlack); width: 100%;   border-left: 1px solid var(--myBlack); }
nav#main ul.top > li > a svg { width: 0.8em; height: auto;  margin-left: auto;   opacity: 0;}
nav#main ul.top > li:nth-of-type(4) ~ li > a {  border-right: 1px solid transparent; }
nav#main ul.top > li > a > *  { transition: transform 333ms var(--my-ease), opacity 333ms var(--my-ease); }
nav#main ul.top > li > a:hover { background: var(--myPurple-70);}
nav#main ul.top > li > a:hover > svg { opacity: 1;}
nav#main ul.top li.social { padding-inline: var(--pixel);  grid-row: 9 / span 1;  margin-top: auto; height: var(--pixel);  border-top: 1px solid var(--myBlack); transform: translateY(-1px);   }

nav#main ul.top li.big { grid-column: 2/3;  grid-row: 5 / span 6; padding: var(--pixel-half) var(--pixel) var(--pixel-half) var(--pixel); border-left: 1px solid var(--myBlack); display: flex; align-items: flex-start;  flex-direction: column;  }
nav#main ul.top li.big ul.sub { font-size: var(--font-size-h5); font-family: var(--primary-font); display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; width: 100%; margin-bottom: var(--pixel);}

.newsletter { margin: auto 0 calc(var(--pixel-half) /  2); }
.newsletter, .newsletter form { display: flex; flex-direction: column;  width: 100%; max-width: calc(var(--pixel) * 7); }
.newsletter p { margin-bottom: .5em;}
.newsletter form label { display: none; }
.newsletter form fieldset { display: flex; flex-direction: column;  position: relative;}
.newsletter form button { position: absolute; bottom: 1px; right: 0; height: calc(100% - 1px);  padding: .1em; display: grid; place-items: center;  font-size: var(--font-size-little); width: 2.2218em; transition: background 250ms var(--my-ease);}
.newsletter form button:hover { background: var(--myPurple-15);}
.newsletter form button svg { width: .7em; height: auto; }
.newsletter form input { font-family: var(--primary-font); color: var(--myBlack); padding: .5em 0; width: 100%;  font-size: var(--font-size-little); background: none; border-radius: 0; transition: padding 250ms var(--my-ease), background 250ms var(--my-ease); margin: 0;  border: none; border-bottom: 1px solid var(--myBlack);}
.newsletter form input:focus-visible { outline: none; background: var(--myWhite-15); padding: .5em .2em;}
.newsletter form input::placeholder { color: var(--myBlack); opacity: 1;}

ul.socials.written { margin-top: 0; justify-content: space-between; gap: 1rem; width: 100%; }
ul.socials.written li a {  font-size: var(--font-size-little);  font-family: var(--primary-font); display: flex; gap: .6em;}
ul.socials.written li a svg { width: .7em; height: auto;  transition: transform 333ms var(--my-ease);}

nav#main ul.top > li:before,nav#main ul.top > li:after { content: ""; position: absolute; width: calc(var(--pixel) - 1px); height: calc(var(--pixel) - 1px);  border: 1px solid transparent;  pointer-events: none;}
nav#main ul.top > li:nth-of-type(1)::before { bottom: 1px; left: 1px; background: var(--myWhite-70); }
nav#main ul.top > li:nth-of-type(1)::after { bottom: 1px; right: 1px; background: var(--myWhite-15); }
nav#main ul.top > li:nth-of-type(2)::before { top: 1px; left: var(--pixel-3); background: var(--myWhite-40); }
nav#main ul.top > li:nth-of-type(2)::after {  top: 1px; right: 1px; background: var(--myWhite-70);}
nav#main ul.top > li:nth-of-type(3)::before { right: var(--pixel-3); bottom: 1px; background: var(--myWhite-70); }
nav#main ul.top > li:nth-of-type(4)::before { left: var(--pixel-4); bottom: 1px; background: var(--myWhite-15); }
nav#main ul.top > li:nth-of-type(6)::before { right: var(--pixel); top: 1px; background: var(--myWhite-40); }
nav#main ul.top > li:nth-of-type(7)::before { right: var(--pixel); top: 1px; background: var(--myWhite-40); }
nav#main ul.top > li:nth-of-type(7)::after { right: var(--pixel-2); bottom: var(--pixel-2); background: var(--myWhite-15); }
nav#main ul.top > li:nth-of-type(8)::before { right: var(--pixel-2); top: 1px; background: var(--myWhite-15); }
nav#main ul.top > li:nth-of-type(8)::after { right: var(--pixel-3); bottom: var(--pixel); background: var(--myWhite-40); }

body.loading nav#main ul { transition: 0s; } 

/* Burger */
input.burger { display: none; }
button.burger { width: var(--pixel); height: var(--pixel); display: grid; place-items: center; background: var(--myWhite); font-size: .9rem; font-family: var(--fancy-font); user-select: none; padding-bottom: .15em; }

nav#main .pixel { transition: background 500ms var(--my-ease) var(--delay); background: transparent; } 


/* Burger checked */
body.menu-open header nav#main ul { opacity: 1; pointer-events: all; transition: opacity 500ms var(--my-ease) 125ms; }
body.menu-open nav#main { pointer-events: all;}
body.menu-open nav#main .pixel { background: var(--myPurple-100);}


/* --------------- FOOTER --------------- */
footer { --margin-top: var(--pixel-4);}
footer > .container {  margin: var(--margin-top) 0  0;  width: 100%; max-width: 100%; font-size: var(--font-size-medium); }   
footer > .container::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;   background: var(--ownColor); content: "";  z-index: 3; }
footer::before { content: ""; position: absolute; width: 100%; height: var(--pixel); bottom: 0; left: 0; background: var(--ownColor); z-index: 2;  }
footer a:hover { text-decoration: underline; }
footer canvas { z-index: 4; clip-path: inset(var(--margin-top) 0 0 0); }

footer .inner { width: calc(100% - var(--gutter-side-cuddle) * 2); margin: var(--pixel) auto 0; display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: flex-start; grid-gap: 0 var(--gutter-side-cuddle);}
footer .inner > * { z-index: 5; position: relative; }
footer .inner > nav ul, footer .inner address { display: flex; flex-direction: column; gap: .5em; align-items: flex-start;  }
footer .inner .md { max-width: 23em; padding-right: var(--gutter-side-cuddle);}
footer .inner address { margin-left: calc(var(--gutter-side-cuddle) * -1 + var(--pixel)); padding-right: var(--gutter-side-cuddle);}
footer .inner address a:not(:first-of-type) { opacity: .4; }

footer .bottom { margin-top: var(--pixel-2); grid-column: -1/1; border-top: 1px solid black;  padding-top: var(--pixel-half); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--gutter-side-cuddle); }  
footer .bottom ul { display: flex; align-items: center;  gap: var(--gutter-side-cuddle);}
footer .bottom p,
footer .bottom ul a:not(:hover) { opacity: .4;}
footer .bottom svg { display: block;  width: 100%; margin-bottom: var(--pixel); }

footer .container .pixel-grid .pixel { background: var(--myWhite) !important; z-index: 5; transition: opacity calc(var(--i, 0) * 15ms) var(--my-ease) calc(var(--i, 0) * 15ms);  opacity: 0; }
footer .container.activate .pixel-grid .pixel { opacity: 1;}


ul.socials { display: flex; align-items: center; gap: 0.5rem; --icon-size: 1.5rem;  margin-top: 2rem;}
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center; }
ul.socials:not(.written) li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center;   padding: 0.3rem; border: 1px solid var(--myBlack); border-radius: 50%;}
ul.socials:not(.written) li svg { width: var(--icon-size); height: var(--icon-size); }

/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { justify-content: flex-end; overflow: hidden;}
section.landing::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myWhite);}
section.landing .container { z-index: 2; min-height: calc(100vh - var(--pixel) * 4); min-height: calc(100vh - var(--pixel) * 4);  display: flex; align-items: flex-end; }
section.landing .pixel { background: transparent;  z-index: 99; transition: background 333ms;   }  
section.landing canvas { z-index: 2; }

section.landing[data-state="starting"] .pixel {  transition: 0s !important;  }
section.landing[data-state="starting"] .pixel[data-color="White"] { background: var(--myWhite) !important; }
section.landing[data-state]::after { display: none; }
section.landing[data-state="animating"] .pixel { z-index: unset; }

section.landing h1 { margin-bottom: -.12em; line-height: 1; font-size: var(--font-size-huge); font-family: var(--fancy-font); color: var(--myWhite); display: flex; flex-direction: column; align-items: flex-start;  margin-top: var(--pixel);}
section.landing h1 > strong { transform: translateY(.1em); display: inline-block; transition: transform 750ms var(--my-ease), opacity 750ms var(--my-ease); opacity: 0;}
section.landing h1 > strong span { opacity: 1;}
section.landing[data-state=animating] h1 > strong { transform: translateX(0); opacity: 1;}

section.landing :is(figure, .media, .media > *) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

body.home[data-state=""] header { opacity: 0;}


@media only screen and (max-width: 800px) {
    body.touch section.landing { z-index: 2; height: calc(var(--pixel) * 11); min-height: unset; }
}

/* =========================================================== */
/* ========================== TITLE ========================== */
/* =========================================================== */
:is(section.title, .title-container) .h3 { max-width: 12em; margin-bottom: 0; position: relative; z-index: 3; }
:is(section.title, .title-container).long .h3 { max-width: 14em;}
:is(section.title, .title-container).long.longer .h3 { max-width: 17em;}
:is(section.title .container, .title-container) { display: flex; align-items: center; }
:is(section.title .container, .title-container)::after { content: ""; position: absolute; top: 0; left: calc(var(--gutter-side-cuddle) * -1); height: 100%; background: var(--myWhite); width: calc((var(--cols)  / 2) * var(--pixel));   z-index: 2;}
:is(section.title, .title-container) + section { margin-top: var(--pixel-neg); } 

.title-container { grid-column: -1/1; width: calc(100% - var(--gutter-side-cuddle) * 2);  max-width: 100%; margin: 0 auto; z-index: 4; position: relative;  display: flex; align-items: center; }

/* =========================================================== */
/* ======================= INFORMATION ======================= */
/* =========================================================== */
section.info .container { display: grid; grid-template-columns: 50% calc(50% - var(--pixel));  grid-gap: var(--pixel);  align-items: flex-start; }
section.info .content {  background: var(--ownColor-15); position: relative; z-index: 4; display: flex; justify-content: center; flex-direction: column;  }
section.info .md { padding: var(--pixel-half) var(--pixel);}
section.info .button { max-width: max-content;  position: relative; z-index: 4; }
section.info .right { position: relative; z-index: 2; }
section.info .pixel[data-color="White"] { z-index: 3; }
section.info .pixel[data-opacity="100"] { opacity: .7;}
 
section.info .boxed.right { display: flex; align-items: center; background: var(--ownColor-15);  margin-top: var(--pixel); margin-left: auto; min-width: calc(var(--box-cols) * var(--pixel));}
section.info .boxed.right .md { padding-right: var(--pixel-2);}
section.info .boxed.right p:has(strong:only-child) { margin-bottom: .5em; }


@media only screen and (max-width: 800px) {
    section.info .md { padding-inline: var(--gutter-side-cuddle);}
    section.info .container { grid-template-columns: 1fr;}
    section.info .right, 
    section.info .container article { width: calc(100% - var(--pixel));}
    section.info .right { margin-left: auto; }
}


/* =========================================================== */
/* ======================= IMAGE LINKS ======================= */
/* =========================================================== */
section .container .topped { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 6; margin-bottom: var(--pixel);  gap: 0 var(--font-size-body); flex-wrap: wrap;}
section .container .topped > * { height: var(--pixel); display: flex; align-items: center;  }
section .container .topped > .btn { align-items: center;  justify-content: flex-end; }
section .container .topped::before { position: absolute; top: 0; left: calc(var(--gutter-side-cuddle) * -1); width: calc(100% + var(--gutter-side-cuddle) * 2); height: 1px; content: ""; background: var(--myBlack);}
section .container .topped :is(.h1,.h2,.h3,.h4,.h5,.h6) { margin-bottom: 0;}
section.hug .container .topped { padding-inline: var(--gutter-side-cuddle); width: calc(100% - var(--gutter-side-cuddle)); }
 
section.image-links nav > ul { display: grid; grid-template-columns: 1fr 1fr; grid-column: -1/1; grid-gap: var(--pixel-half);}

section.image-links li.block { position: relative;  display: flex; }
section.image-links li.block > a { display: flex; width: 100%; }
section.image-links li.block picture {   z-index: 3; }
section.image-links li.block picture::before,
section.image-links li.block picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .05; background: var(--myBlack); z-index: 2; }
section.image-links li.block picture::before { opacity: .67; background:linear-gradient(to top, var(--myBlack), transparent);  top: unset; bottom: 0; height: 60%;}
section.image-links li.block picture.box-shrink { height: calc(var(--box-rows) * var(--pixel) + var(--pixel) * .75);}
section.image-links li.block picture + div picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 5; transition: opacity 333ms var(--my-ease); }
section.image-links li.block picture.box-shrink img { transform: scale(1.05);}   
section.image-links li.block .inner {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6;   padding: 1.75rem 1.5rem;  display: flex; flex-direction: column; justify-content: space-between; }
section.image-links li.block .inner .md { max-width: 17em;  color: var(--myWhite);}

section.image-links li.block .arrow { position: absolute; --offset-right: 1; --offset-bottom: 3;   right: calc((var(--pixel) * var(--offset-right)) - var(--gutter-side-cuddle)); bottom: calc(var(--pixel) * (-0.25 + var(--offset-bottom)) ); z-index: 6; background: var(--myWhite); opacity: 0; transition: opacity 333ms var(--my-ease);}
section.image-links li.block:nth-of-type(4n+1) .arrow { right: calc(var(--pixel) * var(--offset-right) - var(--pixel) * .25); }
section.image-links li.block:nth-of-type(4n+3) .arrow,
section.image-links li.block:nth-of-type(4n+4) .arrow { bottom: calc(var(--pixel) * var(--offset-bottom));}
section.image-links li.block:nth-of-type(4n+3) .arrow { --offset-right: 2;  } 
section.image-links li.block:nth-of-type(4n+4) .arrow { --offset-bottom: 2;  } 

section.image-links .pixel[data-color="White"] { z-index: 4;  }

section.image-links li.block a:hover picture + div picture { opacity: 0; }  
section.image-links li.block a:hover .arrow { opacity: 1;}

section.image-links ul:not(:has(li:nth-of-type(3))) picture.box-shrink { height: calc(var(--box-rows) * var(--pixel));}


@media only screen and (max-width: 800px) {
    section.image-links .container { width: 100%; margin-bottom: 0; }
    section.image-links .topped { width: calc(100% - var(--gutter-side-cuddle) * 2); margin-inline: auto;}
    section.image-links nav ul { grid-template-columns: 1fr; gap: var(--pixel); display: grid; }
    section.image-links li.block picture.box-shrink img { transform: scale(1.15); }
    section.image-links li.block picture.box-shrink { height: calc(var(--box-rows) * var(--pixel) + var(--pixel));}
}



/* =========================================================== */
/* ====================== IMAGE SQUARES ====================== */
/* =========================================================== */
section.squares .container ul {display: grid; grid-template-columns: 1fr 1fr; grid-column: -1/1; grid-gap: var(--pixel-half)}
section.squares .container .h2 { color: var(--myWhite); max-width: 8em;}
section.squares li.block .inner .md { max-width: 25em; }

@media only screen and (max-width: 1000px) {
    section.squares .container { width: 100%; margin-bottom: 0; max-width: 100%; }
    section.squares .topped { width: calc(100% - var(--gutter-side-cuddle) * 2); margin-inline: auto;}
    section.squares .container  ul { grid-template-columns: 1fr; gap: var(--pixel); display: grid; }
    section.squares li.block picture.box-shrink { height: calc(var(--box-rows) * var(--pixel) + var(--pixel)); width: 100%; }
    section.squares li.block picture.box-shrink img { transform: scale(1.15); }
}



/* =========================================================== */
/* ====================== OFFICE TYPES ======================= */
/* =========================================================== */
section.office-types .container { margin-bottom: 0;}
section.office-types .title-container { margin-bottom: var(--pixel);}
section.office-types .block { display: grid; grid-template-columns: 1fr 1fr;  background: var(--ownColor); z-index: 2; position: relative; }
section.office-types .block .h1 { font-family: var(--fancy-font); margin: var(--pixel-4) 0 0 calc(var(--pixel) * 3.5);  position: relative; z-index: 2; }
section.office-types .block:nth-of-type(2) .h1 { margin: calc(var(--pixel) * 3.5) 0 0 var(--pixel-2);}
section.office-types .block a { position: relative; display: block; }

section.office-types .block article { position: relative; height: 100%; display: flex; flex-direction: column; }
section.office-types .block article .pixel-grid { z-index: 1; opacity: 1; }
section.office-types .block article svg { color: var(--myWhite); width: var(--pixel-5);  height: auto; position: absolute; left: var(--pixel-2); top: var(--pixel-2); }
section.office-types .block article > div { margin-top: auto;  padding: var(--pixel); display: flex; gap: var(--pixel); position: relative; z-index: 2; }
section.office-types .block article > div strong { font-weight: var(--font-bold); white-space: nowrap;}

section.office-types .block .arrow { position: absolute;  bottom: var(--pixel); right: var(--pixel); z-index: 2; }

section figure.pixel-hover .pixel-grid .pixel {  opacity: 0; transition: opacity calc(333ms + (var(--i, 0) * 25ms)) var(--my-ease) calc(var(--i, 0) * 25ms); }
section figure.pixel-hover:hover .pixel-grid .pixel[data-color] { opacity: 1;}
section figure.pixel-hover:hover .arrow svg { transform: translate(.1em, -.1em);}

section.image-links + section.office-types .container { margin-top: 0;}

@media only screen and (min-width: 2100px) {
    section.office-types .block .h1 { margin: var(--pixel-7) 0 0 var(--pixel-5); }
    section.office-types .block:nth-of-type(2) .h1 { margin: var(--pixel-6) 0 0 var(--pixel-2);}
    section.office-types .block article svg { width: var(--pixel-10);}
}

@media only screen and (max-width: 1600px) {
    section.office-types .block .h1 { margin-top: var(--pixel-2); margin-left: var(--pixel-2); }
}

@media only screen and (max-width: 1200px) {
    section.office-types .block article svg { top: var(--pixel); left: 0;}
    section.office-types .block article > div { padding: var(--gutter-side-cuddle) var(--gutter-side-cuddle) var(--font-size-h2); }
    
    section.office-types .block:nth-of-type(2) .h1 { margin: var(--pixel-2) 0 0 var(--pixel);  }
}

@media only screen and (max-width: 1000px) and ( min-width: 800px) {
    section.office-types .block article > div { flex-direction: column; gap: 1rem; }
    section.office-types .block article svg { width: var(--pixel-4);  left: var(--pixel); }
}

@media only screen and (max-width: 800px) {
    section.office-types .block {grid-template-columns: 1fr; }
    section.office-types .block article {aspect-ratio: 1; }
    section.office-types .block article > div { flex-direction: column; gap: 1rem; }
}



/* =========================================================== */
/* ====================== UNIQUE POINTS ====================== */
/* =========================================================== */
section.usps .topped { margin-bottom: 0;}
section.usps .container { margin-bottom: var(--pixel-3); }
section.usps ul { --box-cols: 14;  width: calc(var(--pixel) * var(--box-cols));  margin-left: auto;  margin-right: calc(var(--gutter-side-cuddle) * -1 + var(--pixel));  z-index: 2; position: relative;  display: grid; grid-template-rows: repeat(10, var(--pixel)); grid-template-columns: repeat(var(--box-cols), var(--pixel)); }
section.usps ul li { position: relative; padding: 2rem; display: flex;  flex-direction: column;  justify-content: space-between; }
section.usps ul li > :is(span,strong) { opacity: 0; transition: opacity 1000ms var(--my-ease) calc(var(--delay) + 250ms);}
section.usps ul li span { max-width: 7em;  display: inline-block; }
section.usps ul li strong { font-size: var(--font-size); line-height: 1; font-family: var(--fancy-font); }
section.usps ul li .pixel {  background: var(--myWhite) !important; transition: opacity 500ms var(--my-ease) calc(var(--i, 0) * 45ms + var(--delay)); }
section.usps ul li:nth-of-type(1) { --delay: 500ms; background: var(--ownColor-70, var(--myPink-70));   grid-column: 1 / span 4;  grid-row: 7 / span 4; z-index: 2; --font-size: var(--font-size-h1);   }
section.usps ul li:nth-of-type(2) { --delay: 300ms; background: var(--ownColor-40, var(--myPurple-40)); grid-column: 7 / span 6;  grid-row: 5 / span 6;  --font-size: var(--font-size-h1);  }
section.usps ul li:nth-of-type(3) { --delay: 0ms; background: var(--ownColor-15, var(--myBlue-15));   grid-column: 2 / span 5;  grid-row: 2 / span 6; --font-size: var(--font-size-h1);  padding-bottom: calc(var(--pixel) + 1rem);  }
section.usps ul li:nth-of-type(4) { --delay: 150ms; background: var(--ownColor-70, var(--myGreen-70));  grid-column: 7 / span 4;  grid-row: 1 / span 4;  --font-size: var(--font-size-h2);   }
section.usps ul li:not(.activate) .pixel { opacity: 0; }
section.usps ul li:not(.activate) > :is(span,strong) { opacity: 1;}

section.mixed + section.usps .container { margin-top: 0;}

    
@media only screen and (max-width: 1600px) {
    section.usps .container { margin-bottom: var(--pixel-2); }
}

@media only screen and (max-width: 1200px) {
    section.usps .container { margin-bottom: var(--pixel); }
    section.usps ul { --box-cols: 8; }
    section.usps ul li:nth-of-type(1) { grid-column: 1 / span 3;  grid-row: 5 / span 3; }
    section.usps ul li:nth-of-type(2) { grid-column: 5 / span 4;  grid-row: 5 / span 4; }
    section.usps ul li:nth-of-type(3) { grid-column: 2 / span 4;  grid-row: 1 / span 4; padding-bottom:  2rem; }
    section.usps ul li:nth-of-type(4) { grid-column: 6 / span 3;  grid-row: 2 / span 3;  --font-size: var(--font-size-h4); }
}

@media only screen and (max-width: 600px) {
    section.usps ul { margin: 0 auto 0 calc(var(--gutter-side-cuddle) * -1); }
    section.usps ul li { padding: 1.25rem; }
    section.usps ul li:nth-of-type(1) { grid-column: 1 / span 3;  grid-row: 6 / span 3; --font-size: var(--font-size-h2); }
    section.usps ul li:nth-of-type(2) { grid-column: 5 / span 4;  grid-row: 6 / span 4; --font-size: var(--font-size-h2);  }
    section.usps ul li:nth-of-type(3) { grid-column: 1 / span 4;  grid-row: 2 / span 4; --font-size: var(--font-size-h2);  }
    section.usps ul li:nth-of-type(4) { grid-column: 5 / span 3;  grid-row: 3 / span 3; }
}


/* =========================================================== */
/* ======================== USP ICONS ======================== */
/* =========================================================== */
section.icons .container { background: var(--ownColor-70); max-width: calc(var(--pixel) * 16); z-index: 2; display: flex; align-items: center;   margin: 0 auto; }
section.icons .container > ul { padding: var(--pixel) var(--pixel-half); display: flex;  font-size: var(--font-size-little); text-align: center; justify-content: center; gap: 1.8rem; width: 100%; }
section.icons .container > ul svg { width: 1.8rem; height: auto; }
section.icons .container > ul li p {  max-width: 10em; }

@media only screen and (max-width: 1000px) {
    section.icons .container > ul { flex-wrap: wrap; }
    section.icons .container > ul li { min-width: 11rem;}
}

@media only screen and (max-width: 800px) {
    section.icons .container > ul li { min-width: unset;}
}


/* =========================================================== */
/* ======================== SOME NEWS ======================== */
/* =========================================================== */
section.some-news .container { margin-bottom: 0; }
section.cuddle .slider { max-width: 100vw; width: calc(100% + var(--gutter-side-cuddle) * 2); margin-left: calc(var(--gutter-side-cuddle) * -1); overflow: auto;  display: flex; gap: var(--gutter-side-cuddle); scroll-behavior: smooth; scroll-snap-type: x mandatory;  padding-block: var(--pixel-2);  margin-block: calc(var(--pixel-2) * -1); }
section.cuddle .slider ul { display: flex; gap: var(--gutter-side-cuddle);  position: relative; z-index: 2;  height: var(--pixel-7);  align-items: flex-start; }
section.cuddle .slider::before,section.cuddle .slider::after { content: ""; width: calc(var(--pixel) - var(--gutter-side-cuddle)); height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0; }
section.cuddle .slider ul li { width: var(--pixel-5); flex-shrink: 0;  scroll-snap-align: center;  transition: width 333ms var(--my-ease); position: relative;  z-index: 2; }
section.cuddle .slider ul li .inner { display: flex; justify-content: space-between; align-items: flex-start; margin-top: .5rem; opacity: 0; transition: opacity 333ms var(--my-ease);  gap: 1rem; }
section.cuddle .slider ul li .inner .h5 { margin-bottom: 0; transform-origin: top left; transform: scale(.7); transition: transform 333ms var(--my-ease);}
section.cuddle .slider ul li .tag { background: var(--myPink); transform-origin: top right; transform: scale(.7); transition: transform 333ms var(--my-ease);}
section.cuddle .slider ul li.large { width: var(--pixel-6);}
section.cuddle .slider ul li:is(.large,:hover) .inner { opacity: 1;}
section.cuddle .slider ul li.large .inner * { transform: none;}

figure.tracker .pixel { pointer-events: all; }
figure.tracker .pixel-grid { z-index: 8; }
figure.tracker .pixel:not([data-color]) {  background: var(--myWhite) !important; opacity: 0; transition: opacity 1000ms var(--my-ease) 0ms; }
figure.tracker .pixel:is([data-color], :not([data-color])):hover { opacity: 1;  transition: opacity 150ms var(--my-ease-out);  background: var(--myWhite) url("/img/icons/arrow.svg") center center / 42.5% 42.5% no-repeat !important; }

section.cuddle .slider ul li a:hover span.arrow { opacity: 1;}

@media only screen and (max-width: 800px) {   
    section.cuddle .slider::before { width: 0;}
    section.cuddle .slider::after {  width: .1px;}
    section.cuddle .slider ul li .inner { opacity: 1;}
    section.cuddle .slider ul li .inner .h5 { transform: none; font-size: var(--font-size-little);}
}


/* =========================================================== */
/* ===================== TEXT AND IMAGE ====================== */
/* =========================================================== */
section.text-image .container { display: grid; grid-template-columns: 1fr 1fr; z-index: 2; }
section.text-image figure .pixel { opacity: 0; }
section.text-image article { background: var(--ownColor); padding: var(--gutter-side-cuddle) var(--pixel) var(--pixel-half) var(--gutter-side-cuddle);  height: 100%;  display: flex; flex-direction: column; justify-content: space-between;  }
section.text-image article > div {   height: 100%;  display: flex; flex-direction: column; justify-content: space-between; }
section.text-image article .h3 { max-width: 11em;}
section.text-image article .md { max-width: 28em;}

section.text-image + section.text-image:nth-of-type(2n+2) figure {order: -1; }

section.title-and-button + section.text-image .container { margin-top: var(--pixel-neg);}


@media only screen and (max-width: 1000px) {
    section.text-image article { padding-block: 0;}
    section.text-image article > div { padding-block: var(--pixel-half) var(--gutter-side-cuddle); height: auto; }
    section.text-image article .h3 {  margin-bottom: var(--pixel);  font-size: var(--font-size-h4);}
    section.text-image .container { grid-template-columns: 1fr; }
}


/* =========================================================== */
/* ===================== CALL TO ACTION ====================== */
/* =========================================================== */
section.cta { margin-top: calc(var(--pixel) * -2);}
section.cta .container { margin-top: var(--pixel-3);  display: grid; grid-template-columns: calc(50% - var(--pixel)) calc(50% + var(--pixel));  max-width: calc(var(--cols) / 2 * var(--pixel) + var(--pixel-5));  z-index: 2; }
section.cta article { isolation: isolate; position: relative;  width: calc(100% + var(--pixel));  z-index: 2;  display: flex; align-items: center; }
section.cta article .h3 { margin-bottom: 0;}
section.cta article > div {  padding: var(--pixel); display: flex; align-items: center; }
section.cta article::before,section.cta  article::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: var(--ownColor); z-index: -1; }
section.cta article::before {  width: calc(100% - var(--pixel-2)); left: var(--pixel); }
section.cta article::after { height: calc(100% - var(--pixel-2)); top: var(--pixel); }
section.cta figure { margin-left: 0; height: 100%; }
section.cta figure .button {  position: absolute; bottom: var(--pixel); left: var(--pixel);}


@media only screen and (max-width: 1950px) {
    section.cta article .h3 { font-size: var(--font-size-h4); max-width: 10em;}
}


@media only screen and (max-width: 1000px) {
    section.cta .container { width: 100%; }
    section.cta figure picture { min-height: var(--pixel-4); }
    section.cta figure picture img { height: 100%; }
    section.cta figure .button { white-space: nowrap; height: var(--pixel); }
}

@media only screen and (max-width: 800px) {
    section.cta .container {  grid-template-columns: 1fr; margin-top: var(--pixel-2); margin-bottom: 0; }
    section.cta article { width: 100%; justify-content: center; }
    section.cta figure { margin-top: var(--pixel-neg); height: auto; }
}

/* =========================================================== */
/* ========================== INTRO ========================== */
/* =========================================================== */
section.intro { min-height: var(--pixel-8);}
section.intro .container { display: grid; grid-template-columns: 1fr auto; align-items: flex-end;  z-index: 2; height: 100%; margin-top: auto;  color: var(--myWhite); margin-bottom: var(--pixel); }
section.intro .container :is(.h1,.h3) { margin-bottom: 0; display: block;  font-family: var(--fancy-font); }
section.intro .container .h3 { max-width: 17em;}
section.intro picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.intro picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myBlack); opacity: .05;}

@media only screen and (max-width: 1200px) {
    section.intro .container { width: calc(100% - var(--gutter-side-cuddle) * 2);  max-width: unset; }
    section.intro .container .button { margin-right: calc(var(--pixel) - var(--gutter-side-cuddle));}
}

@media only screen and (max-width: 800px) {
    section.intro { min-height: var(--pixel-10); }
    section.intro .container { grid-template-columns: 1fr; justify-items: flex-start;}
    section.intro .container .button { margin-left: 0; margin-right: 0; min-width: calc(((var(--box-cols) + 1) * var(--pixel)) - var(--gutter-side-cuddle));}
    section.intro .container :is(.h1,.h3) { margin-bottom: 0.25em;}
}

@media only screen and (max-width: 500px) {
    section.intro { min-height: calc(var(--pixel) * 11);}
    section.intro .container :is(.h1,.h3) { flex-direction: column; align-items: flex-start; display: flex; }

}


/* =========================================================== */
/* ====================== OFFICE SPACES ====================== */
/* =========================================================== */
section.spaces .container > ul { display: grid; grid-template-columns: 1fr 1fr; grid-column: -1/1; grid-gap: var(--pixel-half); background: none; }

li.space {  position: relative; z-index: 2;  background: var(--spaceColor); }
li.space:nth-of-type(6n+1) { --spaceColor:  var(--ownColor-70);  }
li.space:nth-of-type(6n+2) { --spaceColor:  var(--ownColor-40);  }
li.space:nth-of-type(6n+3) { --spaceColor:  var(--ownColor-15);  }
li.space:nth-of-type(6n+4) { --spaceColor:  var(--ownColor-15);  }
li.space:nth-of-type(6n+5) { --spaceColor:  var(--ownColor-40);  }
li.space:nth-of-type(6n+6) { --spaceColor:  var(--ownColor-70);  }

li.space .inner { display: grid; grid-template-columns: .65fr .35fr; align-items: flex-start;  height: 100%;  min-height: var(--pixel-9);}
li.space.no-image .inner { grid-template-columns: 1fr;}
li.space .inner > div { padding: var(--gutter-side-cuddle);  display: flex; flex-direction: column; align-items: flex-start; height: calc(100% - 1px);;}

li.space .h3 { margin-bottom: 0;}
li.space .h3 + p { opacity: .5; margin-bottom: calc(var(--pixel) * 1.5); }
li.space p:last-of-type { margin: auto 0 1em;}
li.space picture { height: 100%;}
li.space picture img { object-fit: cover;}
li.space ul { font-size: var(--font-size-little);  opacity: .5;  width: 100%; }
li.space ul li { margin-bottom: calc(var(--font-size-body) / 2); padding-bottom: calc(var(--font-size-body) / 2);  border-bottom: 1px solid var(--myBlack); }

li.space .arrow { position: relative; display: inline-block; top: 1px;  margin-top: 1rem; }


@media only screen and (max-width: 1200px) {
    section.spaces .container > ul{ grid-template-columns: 1fr; max-width: var(--pixel-10); margin: 0 auto;  grid-gap: var(--pixel); }
    section.offices li.space .inner { grid-template-columns: 1fr; height: auto;  }
    li.space .inner { min-height: var(--pixel-6);}
}

@media only screen and (max-width: 600px) {
    section.mixed .h1 { font-size: var(--font-size-h2); }
    section.spaces .topped { width: calc(100% - var(--gutter-side-cuddle) * 2); margin-inline: auto; }
    section.spaces .container { width: 100%; margin-bottom: 0; }
    section.spaces li.space .inner { grid-template-columns: 1fr; }
    section.spaces li.space .inner picture { order: -1;}
}

/* =========================================================== */
/* ================= THREE IMAGES TWO TEXTS ================== */
/* =========================================================== */
section.mixed .h1 { max-width: 9em; position: relative; z-index: 3;  margin-bottom: 0; font-family: var(--fancy-font); line-height: var(--line-height-extra-small); }
section.mixed .title-container { align-items: flex-start; }
section.mixed .container { margin-bottom: var(--pixel-3);}
section.mixed .long .h1 { font-size: var(--font-size-h2);  max-width: 14em;}
section.mixed picture { position: relative; z-index: 2; }

section.mixed .top { display: grid; grid-template-columns: auto auto auto;  }
section.mixed .top picture:first-of-type { width: calc(var(--cols) / 4 * var(--pixel) + var(--pixel) + var(--pixel-half)); margin-top: var(--pixel);}
section.mixed .top picture:last-of-type { width: calc(var(--cols) / 4 * var(--pixel) + var(--pixel-half));  margin-left: var(--pixel); }
section.mixed .top .boxed { position: relative;  margin-top: auto; z-index: 4; background: var(--ownColor-15);  display: flex; align-items: center; }
section.mixed .boxed .md {  padding: var(--pixel-half);  }

section.mixed .button {width: calc(var(--cols) / 4 * var(--pixel) - var(--pixel-half));  margin-left: var(--pixel); position: relative; z-index: 4; }

section.mixed .top + .bottom { margin-top: var(--pixel);}
section.mixed .bottom { display: flex;  align-items: flex-start; }
section.mixed .bottom .boxed {position: relative; z-index: 4; background: var(--ownColor-15); width: 50%; clip-path: polygon(var(--pixel) 0, calc(100% - var(--pixel)) 0, calc(100% - var(--pixel)) var(--pixel), 100% var(--pixel), 100% 100%, 0 100%, 0 var(--pixel), var(--pixel) var(--pixel)); }
section.mixed .bottom .boxed .md { padding: calc(var(--pixel) + var(--pixel-half)) var(--pixel) var(--pixel); max-width: 32.5em;}
section.mixed .bottom picture { width: calc(50% - var(--pixel-2)); margin-left: var(--pixel); }

section.mixed .pixel[data-color="White"] { z-index: 3; }
section.mixed .pixel[data-color="White"][data-opacity="100"] { opacity: .7; }

@media only screen and (min-width: 2100px) {
    section.mixed .boxed .md {  padding: var(--pixel);  }
}

@media only screen and (max-width: 1400px) and (min-width: 1200px) {
    section.mixed .top .boxed { width: calc(100% + var(--pixel));}
    section.mixed .bottom .boxed { width: calc(50% + var(--pixel)); margin-left: var(--pixel-neg);}
}

@media only screen and (max-width: 1200px) {
    section.mixed .container { margin-bottom: var(--pixel);}
    section.mixed .top picture:first-of-type { width: auto;}
    section.mixed .top picture:last-of-type { width: var(--pixel-3);  order: 2;  margin: 0;  }
    section.mixed .top .boxed { margin-top: var(--pixel-2);}
    
    section.mixed .bottom picture { width: 50%; margin: 0; }
    section.mixed .bottom .boxed { width: 50%;  }
}

@media only screen and (max-width: 800px) {
    section.mixed .container { width: 100%; max-width: 100%;   }
    section.mixed .top { grid-template-columns: auto auto; position: relative; z-index: 5; }
    section.mixed .top  picture:first-of-type { width: var(--pixel-4);}
    section.mixed .top  picture:last-of-type { margin: 0 var(--pixel-2) 0 auto; grid-column: -1/1;  }
    section.mixed .buttons { z-index: 6; position: relative;  display: flex; align-items: flex-start; }
    section.mixed .button { width: auto;  }
    section.mixed .bottom { flex-direction: column; }
    section.mixed .bottom .boxed { margin-top: var(--pixel-neg); width: 100%; }
    section.mixed .bottom picture { width: 100%; }
}

@media only screen and (max-width: 400px) {
    section.mixed .top { grid-template-columns: 1fr 1fr;}
    section.mixed .top .boxed { margin-top: 0; grid-column: -1/1;}
    section.mixed .top picture:first-of-type { margin-top: 0;}
    section.mixed .top picture:last-of-type {  order: unset;  grid-column: unset; margin: 0 0 0 var(--pixel);}
    section.mixed .bottom { flex-direction: column-reverse; margin-top: 0;}
    section.mixed .top + .bottom { flex-direction: column-reverse; margin-top: 0;}
    section.mixed .bottom .boxed { margin-top: var(--pixel); }
    section.mixed .bottom .boxed .md {  padding-inline: var(--gutter-side-cuddle);}

}


/* =========================================================== */
/* ==================== TITLE AND BUTTON ===================== */
/* =========================================================== */
section.title-and-button .topped {  margin-bottom: 0; }
section.title-and-button + section.mixed { margin-top: var(--pixel-neg);}


/* =========================================================== */
/* ======================== LOCATION ========================= */
/* =========================================================== */
section.location figure { height: 0; padding-bottom: calc(100% + var(--pixel-2));  }
section.location figure > .button { position: absolute; z-index: 2; top: calc(var(--rows) / 2 * var(--pixel));  right: var(--pixel); margin-right: 0; }
#map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}

section.location.map .container { z-index: 2; }
section.location.map figure { padding-bottom: 50%; }
section.location.map .h3 { margin-left: var(--gutter-side-cuddle); }

/* Leaflet overrides */
.leaflet-control-attribution { display: none; }
.leaflet-pane.leaflet-tile-pane { filter: grayscale(1); }
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar.leaflet-bar { border: none;}
#map .custom-marker img { padding: .5rem; width: var(--pixel); height: var(--pixel); display: block;  background: var(--ownColor-70);  transition: background 250ms var(--my-ease); }
#map .custom-marker:hover img { background: var(--myWhite);}
section.location.text-image .leaflet-bar.leaflet-bar { display: none;  } 

@media only screen and (min-width: 2100px) {
    section.location.map .h3 { margin-left: 0;  }
}

@media only screen and (max-width: 800px) {
    section.location figure { padding-bottom: 0; height: var(--pixel-6); }

}
@media only screen and (max-width: 600px) {
    section.location figure { height: var(--pixel-8); }
}

/* =========================================================== */
/* ======================= EVENT LIST ======================== */
/* =========================================================== */
section.event-list .container { margin: 0 auto; background: var(--myWhite); z-index: 2;   overflow: hidden;}
section.event-list .boxed { display: flex; align-items: flex-end; margin-left:  var(--gutter-side-cuddle); }
section.event-list nav { position: relative; }

ul.link-list::before { position: absolute; top: 0; width: 100%; background: var(--myBlack); height: 1px; left: 0; content: "";}
ul.link-list li > a { height: var(--pixel); display: grid; grid-template-columns: calc(var(--cols) / 4 * var(--pixel) + var(--pixel) + var(--pixel-half)) 1fr var(--pixel); align-items: center;  padding-left: var(--gutter-side-cuddle); border-bottom: 1px solid var(--myBlack); margin: 0;  transition: background 250ms var(--my-ease);}
ul.link-list li > a:hover { background: var(--ownColor-15); }
ul.link-list li .h6 { margin-bottom: 0;  }
ul.link-list li :is(h2,h3).h6 { font-weight: var(--font-bold);}
ul.link-list li .arrow { background: none;}

@media only screen and (min-width: 2100px) {
    section.event-list ul.link-list { border-left: 1px solid var(--myBlack); border-right: 1px solid var(--myBlack);  }
}

@media only screen and (max-width: 600px) {
    ul.link-list li > a { height: var(--pixel-2); grid-template-columns: 1fr auto;   grid-gap: 0 var(--gutter-side-cuddle);}
    ul.link-list li > a p { grid-column: 1; margin-bottom: auto;}
    ul.link-list li > a .h6 { grid-row: 1; margin-top: auto; margin-bottom: .5em; }
    ul.link-list li > a .arrow { grid-row: 1/3; grid-column: 2; order: -1;}
}




/* =========================================================== */
/* =================== CONTACT TEAM MEMBERS =================== */
/* =========================================================== */
section.team ul { max-width: calc(var(--cols) / 2 * var(--pixel) + var(--pixel)); margin: 0 var(--pixel-2) 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--pixel) var(--pixel-2); }

li.teamcard { position: relative; z-index: 2;  width: calc(var(--cols) / 4 * var(--pixel) - var(--pixel-half)); }
li.teamcard .boxed { isolation: isolate;}
li.teamcard .boxed::before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% - var(--pixel-2)); height: var(--pixel); background: var(--myWhite);  z-index: -1; }
li.teamcard .button { position: absolute; bottom: 0; left: 0; }
li.teamcard .h5 { margin-bottom: 0; padding-top: .25rem; padding-left: 0.25rem; }
li.teamcard p { font-size: var(--font-size-medium);  padding-left: 0.25rem; }


@media only screen and (max-width: 1400px) {
    section.team ul { max-width: 100%; margin: 0; }
    li.teamcard { width: 100%; }
}

@media only screen and (max-width: 800px) {
    section.team .container { width: 100%; max-width: 100%;}
}
@media only screen and (max-width: 600px) {
    section.team ul { grid-template-columns: 1fr; max-width: var(--pixel-4); margin: 0 auto;  grid-gap: 0;}
    section.team ul li:nth-of-type(2n+1) { margin-left: var(--pixel-neg); }
    section.team ul li:nth-of-type(2n+2) { margin-left: var(--pixel); }
    section.team ul li .boxed { height: var(--pixel-2); display: flex; flex-direction: column; justify-content: flex-end; }
    section.team ul li  picture.box-shrink { height: calc(5 * var(--pixel)); }
    section.team .container { margin: 0 auto;}
}


/* =========================================================== */
/* ======================= FACILITIES ======================== */
/* =========================================================== */
section.facilities .container { margin-bottom: 0; }
section.facilities .block { display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 2; background: var(--myWhite);  overflow: hidden; height: calc(var(--items) * var(--pixel)); margin-bottom: var(--pixel);}
section.facilities .block figure { height: 100%; display: flex; align-items: center; }
section.facilities .block figure .h3 { margin-bottom: 0.25em;}
section.facilities .block figure div { display: flex; flex-direction: column; justify-content: center;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: var(--pixel-half); color: var(--myWhite); max-width: 29rem; }
section.facilities .block picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
section.facilities .block picture img { height: 100%; }
section.facilities .block picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myBlack); opacity: .4;}
section.facilities ul.link-list::before { display: none; }
section.facilities ul.link-list li a { grid-template-columns: 1fr auto;}
section.facilities ul.link-list li:first-of-type a { border-top: 1px solid var(--myBlack);}


@media only screen and (max-width: 800px) {
    section.facilities .block { grid-template-columns: 1fr; height: calc(var(--pixel-4) + var(--items) * var(--pixel))}
    section.facilities .block figure { height: var(--pixel-4);}
    section.facilities ul.link-list li > a { height: var(--pixel);}
    section.facilities ul.link-list li > a .arrow { grid-row: 1; grid-column: 2;} 
}

@media only screen and (max-width: 600px) {
    section.facilities ul.link-list li > a { font-size: var(--font-size-medium);}
}
/* =========================================================== */
/* ========================= OFFICES ========================= */
/* =========================================================== */
section .topped .buttons { display: flex; gap: 1.5em; font-size: var(--font-size-little); align-items: center;}
section .topped .buttons .btn { text-align: center;}
section.offices .topped .buttons .btn.underlined:not(:only-of-type  ) { pointer-events: none;}
section.offices .h1 { position: relative; z-index: 2;  margin-bottom: 0;  }
section.offices .split { display: grid; grid-template-columns: calc(50% - var(--pixel)) calc(50% + var(--pixel));  align-items: center; }
section.offices .split .boxed:last-of-type { background: var(--ownColor-15);   z-index: 2; position: relative; display: flex;  align-items: center;   width: calc(100% + var(--gutter-side-cuddle));}
section.offices .split .boxed:last-of-type .md { padding: var(--pixel); }
section.offices .split .boxed:last-of-type::before { position: absolute; bottom: var(--pixel-neg); width: var(--pixel-3); height: var(--pixel);  content: ""; background: var(--ownColor-15); left: var(--pixel-5);}
section.offices .split .boxed:last-of-type::after { position: absolute; top: var(--pixel-neg); width: var(--pixel-5); height: var(--pixel);  content: ""; background: var(--ownColor-15); left: var(--pixel-2);}
section.offices ul.list { margin-top: var(--pixel-2);}

ul.list { display: grid; grid-gap: var(--pixel-half); grid-template-columns: 1fr 1fr 1fr; grid-column: -1/1; background: var(--myWhite); position: relative; z-index: 2; }

section.offices li.space:is(:nth-of-type(4),:nth-of-type(5),:nth-of-type(6)) .inner.boxed:last-of-type { min-height: calc(var(--box-rows, 0) * var(--pixel) - var(--pixel-half));}

@media only screen and (max-width: 1200px) {
    section.offices .container { width: 100%; max-width: 100%; margin-bottom: 0;}
    section.offices .topped { width: calc(100% - var(--gutter-side-cuddle) * 2); margin-inline: auto;}
    section.offices .h1 { margin-left: var(--gutter-side-cuddle); margin-bottom: var(--pixel); height: var(--pixel); min-height: unset; position: relative; z-index: 3;}
    section.offices .split .boxed:last-of-type { width: calc(100% - var(--pixel)); margin-left: var(--pixel); }
    section.offices .split .boxed:last-of-type::before {  left: unset; right: var(--pixel); }
    section.offices .split .boxed:last-of-type::after {  left: unset; right: var(--pixel-3); width: var(--pixel-2); }
    section.offices ul.list { grid-template-columns: 1fr; max-width: var(--pixel-6);  margin: 0 auto;  grid-gap: var(--pixel); background: none;}
}

@media only screen and (max-width: 800px) {
     section.offices .split {grid-template-columns: 1fr; }
     section.offices ul.list { margin-top: var(--pixel);}
}
@media only screen and (max-width: 600px) {
    section.offices ul.list { max-width: 100%; }
}

/* =========================================================== */
/* ========================= IMAGES ========================== */
/* =========================================================== */
section.images .boxed { display: flex; align-items: center; line-height: var(--line-height-extra-small);}
section.images .h1 { font-family: var(--fancy-font); max-width: 11em; position: relative; z-index: 2; margin-bottom: 0; margin-left: var(--gutter-side-cuddle); }

.carousel { position: relative; z-index: 2;  margin-top: var(--pixel); }
.carousel .overflower { overflow: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;}
.carousel ul { display: flex; gap: var(--pixel);  }
.carousel ul li { width: calc(50% + var(--pixel)); flex-shrink: 0; scroll-snap-align: start;}
.carousel .buttons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; justify-content: space-between; z-index: 2;  padding-inline: var(--pixel);}
.carousel .buttons button { pointer-events: all; width: var(--pixel); height: var(--pixel); background: var(--myWhite); display: grid; place-items: center; transition: background 250ms var(--my-ease), opacity 250ms var(--my-ease);  }
.carousel .buttons button:first-of-type { transform: scaleX(-1);}
.carousel .buttons button:hover { background: var(--ownColor-40);}
.carousel .buttons button svg { height: 50%; width: auto; margin-left: .2em; }
.carousel .overflower[data-pos=left] ~ .buttons button:first-of-type,
.carousel .overflower[data-pos=right] ~ .buttons button:last-of-type { opacity: .4; background: var(--myWhite);  pointer-events: none;}

.carousel .overflower.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none;  scroll-behavior: unset;}
.carousel .overflower.is-drag-interact { scroll-snap-type: none; user-select: none;  scroll-behavior: unset;}

section.offices + section.images .container { margin-top: 0;}

@media only screen and (max-width: 800px) {
    section.images .h1 { font-size: var(--font-size-h2); }
    section.images picture.box-shrink { height: var(--pixel-4); }
    section.images picture.box-shrink img { height: 100%; }
    .carousel .buttons { padding: 0;  }
    body.touch .carousel .buttons { display: none; }
}


/* =========================================================== */
/* ===================== LISTED BENEFITS ===================== */
/* =========================================================== */
section.benefits .container { display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 2;  }
section.benefits .container > .boxed .h5 {padding: var(--gutter-side-cuddle); }
section.benefits ul .h5 { font-weight: var(--font-bold); }
section.benefits ul li { position: relative;}
section.benefits ul li .inner {   padding: var(--gutter-side-cuddle);}
section.benefits ul li::before { content: ""; position: absolute; top: 0; right: 0; width: 100vw; height: 1px; background: var(--myBlack); }
section.benefits ul li:last-of-type::after { content: ""; position: absolute; bottom: 0; right: 0; width: 100vw; height: 1px; background: var(--myBlack); }
section.benefits ul p { font-size: var(--font-size-h5); max-width: 19em; }
section.benefits .pixel[data-opacity="100"] { opacity: .4; }


@media only screen and (max-width: 600px) {
    section.benefits .boxed .h5 { margin-bottom: 0;}
    section.benefits .container { grid-template-columns: 1fr; }
}

/* =========================================================== */
/* ================== TEAM MEMBER AND FORM =================== */
/* =========================================================== */
section.team-form .container { display: grid; grid-template-columns: 1fr 1fr;}
section.team-form .topped { grid-column: -1/1;}
section.team-form .container > ul { margin: auto 0 var(--pixel) auto; }

section .form {  position: relative; z-index: 2;  }
section .form  > .inner { background: var(--ownColor); }
section .form .h4 { margin-bottom: 0.2em;}
section .form .inner { padding: var(--pixel) var(--pixel) var(--pixel);    }
section .form .inner .md { max-width: 17em; margin-bottom: var(--gutter-side-cuddle);}

@media only screen and (max-width: 1600px) {
    section.team-form .container { margin-bottom: 0;}
}

@media only screen and (max-width: 1400px) {
    section.team-form .container > ul li.teamcard { width: calc(100% - var(--pixel-3));  margin-left: auto; min-height: var(--pixel-5); }
}
@media only screen and (max-width: 1000px) {
    section.team-form .container { grid-template-columns: 1fr;}
    section.team-form .container ul { order: 2; margin-bottom: 0; }
    section.team-form .container > ul li.teamcard { width: var(--pixel-6)}   
}
@media only screen and (max-width: 600px) {
    section .form form { margin: var(--pixel-half) 0; }
    section.team-form .container > ul li.teamcard { width: var(--pixel-4); margin-right: var(--pixel); } 
    section.team-form .container > ul li.teamcard .boxed { min-height: var(--pixel-2); display: flex; flex-direction: column; justify-content: flex-end; }
    section.team-form .container > ul li.teamcard picture { min-height: var(--pixel-5);}
}

/* =========================================================== */
/* ================== STANDING TEXT BLOCKS =================== */
/* =========================================================== */
section.texts li.space .h4 { margin-bottom: var(--pixel-3);  }
section.texts li.space .inner { min-height: var(--pixel-6);}
section.texts li.space .md { margin-top: auto; }
section.texts li.space p:last-of-type { margin-bottom: 0.5em;}

section.texts ul.list[data-len='4'] { grid-template-columns: repeat(4, 1fr);  font-size: var(--font-size-little);}
section.texts ul.list[data-len='4'] li.space {  min-height: var(--pixel-7); }
section.texts ul.list[data-len='4'] li.space .h4 { margin-bottom: var(--pixel);}
section.texts ul.list[data-len='4'] li.space.has-inner-image .h4 { margin-bottom: 0;}
section.texts ul.list[data-len='4'] li.space.has-inner-image picture { height: auto; margin: 1rem 0 var(--pixel); }

@media only screen and (max-width: 1600px) {
    section.texts ul.list[data-len='4'] { grid-template-columns: repeat(2, 1fr); max-width: calc(var(--pixel) * 14);  margin: 0 auto;  }
    
}
@media only screen and (max-width: 1200px) {
    section.texts ul.list[data-len='4'] { grid-template-columns: 1fr; max-width: var(--pixel-6);   }
    section.texts ul.list { grid-template-columns: 1fr; max-width: var(--pixel-6);  margin: 0 auto;  grid-gap: var(--pixel); background: none;}
}

@media only screen and (max-width: 600px) {
    section.texts .container { width: 100%; max-width: 100%;}
    section.texts .topped { width: calc(100% - var(--gutter-side-cuddle) * 2);  margin-inline: auto;}
    section.texts ul.list { max-width: 100%; }
    section.texts li.space[data-len='4'] .inner {min-height: calc(var(--box-rows, 0) * var(--pixel));}
}

/* =========================================================== */
/* ================== LARGE TITLE AND TEXT =================== */
/* =========================================================== */
section.large-title .container { align-items: flex-start; position: relative; z-index: 2; }
section.large-title .h1 { margin-left: var(--gutter-side-cuddle);  margin-bottom: 0;}
section.large-title article .md  { padding: var(--pixel); }
section.large-title .container > .boxed { display: flex; align-items: center; }
section.large-title article .boxed:last-of-type:before { content: ""; width: calc(100% - var(--pixel-3)); position: absolute; top: var(--pixel-neg); background: var(--ownColor-15);  height: var(--pixel); right: var(--pixel); }
section.large-title article .boxed:last-of-type:after { content: ""; width: var(--pixel-3); position: absolute; bottom: var(--pixel-neg); background: var(--ownColor-15);  height: var(--pixel); left: var(--pixel-4); }

section.title-and-button + section.large-title .container { margin-top: 0;}


@media only screen and (max-width: 1200px) {
    section.large-title article .md  { padding: var(--pixel-half); }
    section.large-title article .boxed:last-of-type:after { width: var(--pixel);  right: var(--pixel);  left: unset;}
}


/* =========================================================== */
/* ====================== DEVELOPMENTS ======================= */
/* =========================================================== */
section.developments .container { z-index: 2;  }
section.developments .h1 { margin-bottom: 0;  margin-left: var(--gutter-side-cuddle); } 
section.developments .split { display: grid; grid-template-columns: 50% calc(50% - var(--pixel)); align-items: flex-start; }
section.developments .split .boxed { display: flex; flex-direction: column; align-items: flex-start; }
section.developments .split .boxed .inner { background: var(--ownColor-15); position: relative; }
section.developments .split > .boxed:first-of-type { margin-top: var(--pixel);}
section.developments .split > .boxed:last-of-type { margin-left: var(--pixel);}
section.developments .split .boxed .md { padding: var(--pixel);  }
section.developments .split .boxed .button { position: relative; margin-left: auto;  }

section.text-image + section.developments .container { margin-top: 0;}


@media only screen and (max-width: 1200px) {
    section.developments .split { grid-template-columns: 50% 50%; }
}
@media only screen and (max-width: 1000px) {
    section.developments { overflow: hidden;}
    section.developments .h1 { font-size: var(--font-size-h2); margin-left: var(--gutter-side-cuddle); }
    section.developments .split { grid-template-columns: 1fr; }
    section.developments .split > .boxed:first-of-type { max-width: var(--pixel-10); width: 100vw;  }
    section.developments .split > .boxed:last-of-type { max-width: var(--pixel-8);  width: calc(100vw - var(--pixel));}
    section.developments .button { white-space: nowrap;}
}

/* =========================================================== */
/* ========================= CONTACT ========================= */
/* =========================================================== */
section.contact .container { z-index: 2; display: grid; grid-template-columns: 1fr 1fr; }
section.contact .form { background: var(--myPurple);}
section.contact .form form { scroll-margin-top: var(--pixel-2); }
section.contact .form .inner { padding: var(--pixel);}
section.contact .content { padding: var(--pixel); }
section.contact .content .h3 { max-width: 10em;}
section.contact .content p { max-width: 30em;}
section.contact address { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem;}
section.contact .h6 { font-weight: var(--font-bold); margin-top: 1em; }
section.contact address ul { font-size: var(--font-size-little);}
section.contact address ul li { margin-bottom: .5em;}
section.contact address ul li a { text-decoration: underline;}
section.contact ul.socials { margin-top: 0; }
section.contact ul.socials li a { border: none; transition: color 250ms var(--my-ease);}
section.contact ul.socials li a:hover { color:  var(--ownColor) }

@media only screen and (max-width: 1200px) {
    section.contact .container { grid-template-columns: 1fr; margin-bottom: 0;}
    section.contact form { max-width: unset; }
    section.contact .content { margin-top: var(--pixel); }
}

@media only screen and (max-width: 600px) {
    section.contact .content { padding: 0; }
    section.contact .content > div { padding: var(--pixel)  var(--gutter-side-cuddle);;}
}

/* =========================================================== */
/* ==================== DOWNLOADS & LINKS ==================== */
/* =========================================================== */
section.links ul.downloads { position: relative; z-index: 2;  overflow: hidden;}
section.links ul.downloads > li > div { display: grid; grid-template-columns: 1fr 1fr;  align-items: center; height: 100%; position: relative;  }
section.links ul.downloads .boxed { position: relative; }
section.links ul.downloads .inner > div { padding: var(--pixel) var(--pixel-half) var(--pixel-2); max-width: 28em; }
section.links ul.downloads .inner .button {  position: absolute; bottom: 0;  width: 50%; min-width: 0;  left: 0; margin: 0;}
section.links ul.downloads .inner .button:hover { background: var(--button-hover-color);}
section.links ul.downloads picture { height: calc(100% + 0px); }
section.links ul.downloads picture img  { height: 100%; object-fit: cover;}

section.links ul.downloads > li:nth-of-type(2n+1) picture { order: -1; }
section.links ul.downloads > li:nth-of-type(2n+1) .button { right: 0; left: unset;}
section.links ul.downloads > li:nth-of-type(4n+1) > div { background: var(--ownColor-15); --button-hover-color: var(--ownColor-70);  }
section.links ul.downloads > li:nth-of-type(4n+2) > div { background: var(--ownColor-40); --button-hover-color: var(--ownColor-70);  }
section.links ul.downloads > li:nth-of-type(4n+3) > div { background: var(--ownColor-70); --button-hover-color: var(--ownColor-40);  }
section.links ul.downloads > li:nth-of-type(4n+4) > div { background: var(--ownColor); --button-hover-color: var(--ownColor-40);  }


@media only screen and (max-width: 800px) {
    section.links .container { margin-bottom: 0;}
    section.links ul.downloads > li .boxed { grid-template-columns: 1fr; min-height: calc(var(--box-rows, 0) * var(--pixel) + var(--pixel-4)); align-items: flex-start;  justify-content: flex-end; }
    section.links ul.downloads .inner { margin-top: auto; }
    section.links ul.downloads .inner .button { position: relative;  width: auto;  }
    section.links ul.downloads .inner > div { padding-block: 1rem var(--pixel);}
    section.links ul.downloads  picture { order: -1; height: var(--pixel-4);  }
}

/* =========================================================== */
/* =================== RELATED FACILITIES ==================== */
/* =========================================================== */
ul.list li picture.svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
ul.list li picture.svg::before { width: 100%; padding-bottom: 120%; content: ""; height: 0;  }
ul.list li picture.svg img { max-width: var(--pixel-2); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  z-index: 2; }
ul.list li picture.svg + div { position: relative;  background: var(--ownColor-15); width: 100%;  color: var(--myBlack);}
section.some-facilities ul.list { background: none;}
section.some-facilities li > a { display: block; position: relative; height: 100%;  }
section.some-facilities li > a > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  display: flex; align-items: flex-start;  flex-direction: column; padding: 1rem;   justify-content: space-between; color: var(--myWhite);}
section.some-facilities li picture:not(.svg)::before,
section.some-facilities li picture:not(.svg)::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--myBlack); opacity: .1; }
section.some-facilities li picture:not(.svg)::after { opacity: .67; background: linear-gradient(to bottom, var(--myBlack), transparent);  height: 60%;}

@media only screen and (max-width: 1000px) {
    section.some-facilities ul.list { grid-template-columns: 1fr 1fr;}
}

@media only screen and (max-width: 600px) {
    section.some-facilities ul.list { grid-template-columns: 1fr;}
}


/* =========================================================== */
/* ====================== PLAIN CONTENT ====================== */
/* =========================================================== */
section.plain .container { max-width: calc(var(--pixel) * 14); background: var(--ownColor-15); z-index: 2; }
section.plain .container > div { padding: var(--pixel); }

@media only screen and (max-width: 600px) {
    section.plain .container { max-width: 100%; width: 100%; }
    section.plain .container > div { padding-inline: var(--gutter-side-cuddle); }
}

/* =========================================================== */
/* ======================== ALL NEWS ========================= */
/* =========================================================== */
section.all-news li > a { display: block; position: relative; height: 100%;  }
section.all-news ul.list { background: none;}
section.all-news li > a > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  display: flex; align-items: flex-start;  flex-direction: column; padding: 1rem;   justify-content: flex-start; color: var(--myWhite);}
section.all-news li picture:not(.svg)::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--myBlack); opacity: .1; }
section.all-news li p.tag { background: var(--ownColor);  margin-bottom: 1.5rem; }
section.all-news li .arrow { margin-top: auto; }
section.all-news li[data-visible=false] { display: none; }


@media only screen and (max-width: 1000px) {
    section.all-news ul.list { grid-template-columns: 1fr 1fr;}
}

@media only screen and (max-width: 600px) {
    section.all-news ul.list { grid-template-columns: 1fr;}
}



/* =========================================================== */
/* ========================== QUOTE ========================== */
/* =========================================================== */
section.quote .container { max-width: calc(var(--pixel) * 12);  z-index: 2; }
section.quote figure { display: flex; justify-content: center; flex-direction: column;  background: var(--ownColor-15); }
section.quote figure::before { position: absolute; left: 0; width: var(--pixel); height: 100%; background: var(--ownColor); content: ""; }
section.quote figure .inner { padding: 0 var(--pixel) 0 var(--pixel-2); }
section.quote figure blockquote { font-style: italic; }
section.quote figure picture { width: var(--pixel); height: var(--pixel); float: left; margin-right: 1rem;  }
section.quote figure p { margin: 2em 0;}
section.quote figure p strong { display: block; }

@media only screen and (max-width: 600px) {
    section.quote .container { width: calc(100% - var(--pixel-2));}
    section.quote figure::before { width: var(--gutter-side-cuddle); }
    section.quote figure .inner { padding-inline: 3rem var(--gutter-side-cuddle);}
    section.quote figure p { flex-direction: column;  }
    section.quote figure picture { float: none; width: var(--pixel-2); height: var(--pixel-2); margin-bottom: 2rem;}
}

/* =========================================================== */
/* ========================= BUTTON ========================== */
/* =========================================================== */
section.only-button .container { max-width: var(--pixel-8);  z-index: 2; }
section.only-button .container div { padding: var(--pixel);  background: var(--ownColor-15); width: 100%; }
section.only-button .container .button { width: 100%; }

@media only screen and (max-width: 600px) {
    section.only-button .container { max-width: 100%; width: 100%;}
    section.only-button .container div { padding: var(--pixel-half);}
    section.only-button .container .button { width: auto; }
}


/* =========================================================== */
/* ======================== STANDARD ========================= */
/* =========================================================== */
section.standard:first-of-type .container { margin-top: var(--pixel); margin-bottom: 0;  background: var(--myWhite); position: relative; z-index: 2;  max-width: calc(var(--pixel) * 16);}
section.standard .prose {  padding: var(--pixel);}



/* --------------- COMING SOON PAGE --------------- */
section.coming-soon { height: 100vh; height: 100dvh; overflow: hidden; min-height: unset;}
section.coming-soon:first-of-type .container { height: 100%; margin: 0 auto;   display: flex; flex-direction: column; margin-top: var(--pixel-3); min-height: var(--pixel-9); }
section.coming-soon .boxed { margin: 0 auto; display: block;   z-index: 2; position: relative;  width: 100%; max-width: var(--pixel-8); }
section.coming-soon .boxed .inner {   padding: var(--pixel); display: flex; flex-direction: column; align-items: center; }
section.coming-soon svg {width: 100%;  height: auto;   width: calc(var(--pixel) * 4);  background: var(--myWhite); height: var(--pixel-4); }
section.coming-soon h1 { margin-top: 0em;  text-align: center; white-space: nowrap;}
section.coming-soon .btn {  font-size: var(--font-size-tiny); position: absolute; top: calc((var(--rows) - 5) * var(--pixel)); text-align: center;  left: 0; right: 0; margin: 0 auto;  height: var(--pixel); width: var(--pixel-4); background: var(--myWhite); z-index: 2; display: flex; align-items: center; justify-content: center;  }

body.coming-soon footer .container { margin-top: 0; height: 0; overflow: hidden;}
body.coming-soon footer::before { display: none; }
body.coming-soon footer .pixel { margin-top: var(--pixel-neg);}

@media only screen and (max-width: 1600px) {
    section.coming-soon:first-of-type .container {  margin-top: var(--pixel-2);}
}

@media only screen and (max-width: 800px) {
    section.coming-soon .btn { width: var(--pixel-4); }
    section.coming-soon h1 { font-size: var(--font-size-h4); margin-top: .1em;}

}


/* --------------- NEWS MARGIN OVERRIDES --------------- */
body.news section.info + section.images .container { margin-top: 0;}

/* --------------- FORM --------------- */
form.custom { 
    /* Layout */
    --form-columns: 2;
    --form-gap: 0;  

    /* Inputs */
    --form-main-color: var(--myBlack);
    --form-input-background-color: var(--myWhite);
    --form-padding-x: var(--gutter-side-cuddle); 
    --form-padding-y: .5em;  
    --form-padding: var(--form-padding-y) var(--form-padding-x);

    /* Borders */
    --form-border-color: var(--myBlack); 
    --form-border-width: 1px;  
    --form-border-radius: 0; 
    
    /* Labels */
    --form-label-color: var(--myBlack);
    --form-label-border-radius: 0;
    --form-label-background-color: transparent;  
    --form-label-asterisk-color: var(--myBlack);
    --form-label-transform-distance: 130%;
    
    /* Checkboxes */
    --form-check-border-radius: .1em;

    /* States */
    --form-color-focus: var(--myBlack);
    --form-color-error: var(--myPink);

    /* Transition */
    --form-transition: 250ms ease; 
}
/* LAYOUT */
form.custom { position: relative; max-width: 50rem; margin: 0 auto;  }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr);  grid-gap: var(--form-gap);}
form.custom fieldset > div { position: relative;  display: flex; flex-direction: column; }

/* INPUTS */
form.custom :is(textarea, input, select) { padding: var(--form-padding); font-family: var(--primaryFont); font-size: var(--font-size-body); color: var(--form-main-color); width: 100%; transition: border var(--form-transition), padding var(--form-transition); border-right: var(--form-border-width) solid var(--form-border-color); border-bottom: var(--form-border-width) solid var(--form-border-color);  background: var(--form-input-background-color); border-radius: var(--form-border-radius);  height: var(--pixel);  font-size: var(--font-size-little);}
form.custom :is(textarea, input, select):focus-visible { outline: none; }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-main-color); }
form.custom .normal.double input { border: none; border-bottom: 1px solid var(--myBlack); }
form.custom div.double, form.custom small, form.custom small ~ * { grid-column: -1/1; }

/* TEXTAREA EXTRA'S */
form.custom .normal textarea { min-width: 100%; max-width: 100%; resize: none; border: none;  border-bottom: var(--form-border-width) solid var(--form-border-color); height: var(--pixel-3);  padding-top: 1.5em; }

/* DIVIDER */
form.custom .divider:not(:first-of-type) { margin-top: 2em; }

/* LABEL */
form.custom .normal label { position: absolute;  top: 50%; left: var(--form-padding-x); opacity: .85; pointer-events: none; transform-origin: left; transform: translateY(-50%); transition: transform var(--form-transition); white-space: nowrap; color: var(--form-label-color);  border-radius: var(--form-label-border-radius); font-size: var(--font-size-tiny);  opacity: .5; }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) { padding-top: 1em; }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) + label, form.custom .select[data-active=true] label { transform: translate(0, calc(var(--form-label-transform-distance) * -1)) scale(0.7); }

form.custom .normal textarea:is(:focus,:not(:placeholder-shown)) {  padding-top: 1.5em;  }
form.custom .normal textarea + label { top: 2em;}

/* ASTERISK */
form.custom .normal :is(textarea, input, select)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em; color: var(--form-label-asterisk-color); transition: var(--form-transition); }
form.custom .normal :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label:after { opacity: 0; }
form.custom .normal + .normal:nth-of-type(2n) :is(input,select,textarea) { border-right: none;}

/* EMAIL VALIDATION */
form.custom 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); }

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.333em; background: var(--form-input-background-color);  border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: var(--form-padding-y); left: var(--form-padding-x); pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); font-weight: var(--font-semi-bold); opacity: 0; }
form.custom .select[data-active=true]  span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .4em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.18em); background: var(--form-main-color); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition); }
form.custom .select::after { --r: -45deg; }

/* MULTICHOICE / SINGLE CHOICE */
form.custom .field { flex-direction: column; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color);}
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1em;   }
form.custom .field ul li { position: relative; display: flex;  color: var(--form-label-color);}
form.custom .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus { border: none; outline: none; }
form.custom .field ul input:focus-visible + label::before { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label:hover::before { background: var(--form-color-focus); }
form.custom .field ul label { padding-left: 1.5em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 250ms; }
form.custom .field ul label::after { background: url("/img/icons/check.svg") center center / contain no-repeat; left: 0px; background-size: 60%; transform-origin: bottom; transition: transform var(--form-transition); transform: scale(0); border: none; }
form.custom .field ul input:checked ~ label::after { transform: none; }

/* BUTTON */
form.custom button.button { width: 100%; grid-column: -1/1;  font-size: var(--font-size-body);}

/* CAPCHA NOTICES */
form.custom small { font-size: 12px; margin: 1em auto .0; opacity: .5; position: absolute; bottom: -1em; transform: translateY(100%); right: 0; left: 0;  text-align: center;}
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }



/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: disc;}
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul)  { padding-left: 1em;}
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--mainColor);}
.prose > * strong { --font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.button) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) { font-weight: var(--font-medium);}
.prose h1 { font-size: var(--font-size-h3);}
.prose h2 { font-size: var(--font-size-h4);}
.prose h3 { font-size: var(--font-size-h5);}
.prose h4 { font-size: var(--font-size-h6);}
.prose :is(h1,h2,h3,h4) + * { margin-top: .2em;}


/* --------------- 404 PAGE --------------- */
section.not-found { min-height: unset; }
section.not-found .container { display: flex; flex-direction: column; align-items: center; justify-content: center;  z-index: 2; margin-top: 0 !important;  height: 100%; z-index: 105; pointer-events: none;}
section.not-found .container .inner  { display: flex; flex-direction: column; align-items: center; justify-content: center;  height: 100vh; height: 100dvh; min-height: var(--pixel-10);   }
section.not-found canvas { z-index: 105;  pointer-events: none;}
section.not-found .btn { margin-top: 1rem; margin-bottom: var(--pixel);  position: relative; z-index: 106; }
section.not-found .pixel[data-opacity="100"] { opacity: .4;}
body.not-found { overflow: hidden;}
body.not-found footer { display: none; }

@media only screen and (max-width: 768px) {
    section.not-found .container .inner { height: calc(100dvh - var(--pixel));}
}

body.menu-open header { z-index: 107;}


/* --------------- 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: 1200px) {
    /* --------------- HEADER --------------- */
    nav#main ul.top { grid-template-rows: repeat(7, var(--pixel)); }
    nav#main ul.top > li { font-size: var(--font-size-h4); grid-row: span 1; }
    nav#main ul.top li.big { grid-row: 3 / span 5; }
    nav#main ul.top li.big ul.sub { margin-bottom: 1rem; grid-template-columns: 1fr;}
    nav#main ul.top li.social { grid-row: 7 / span 1;  } 
}

@media only screen and (max-width: 1000px) {
    /* --------------- GENERAL --------------- */
    :root {
        --font-size-huge: 5rem;
        --font-size-h1: 3.5rem;
        --font-size-h2: 2.6rem;
        --font-size-h3: 2.1rem;
        --font-size-h4: 1.8rem;
    }
    
    /* --------------- HEADER --------------- */
    nav#main ul.top > li:nth-of-type(2)::after { display: none; }
    nav#main ul.top > li:nth-of-type(4)::before { display: none; }
    nav#main ul.top > li:nth-of-type(3)::before { right: var(--pixel); }  


}
@media only screen and (max-width: 800px) {
    /* --------------- GENERAL --------------- */
    .boxed-mobile { min-height: calc(var(--box-rows, 0) * var(--pixel));}
    .button { font-size: var(--font-size-body);}
    
    /* --------------- HEADER --------------- */
    nav#main ul.top li.social { padding-inline-start: var(--gutter-side-cuddle); }
    nav#main ul.top{  grid-template-rows: unset; }
    nav#main ul.top > li { min-height: var(--pixel); }
    nav#main ul.top li:is(.big,.social) { grid-column: -1/1; grid-row: unset;}
    header .newsletter { margin-top: var(--pixel-half);}

    /* --------------- FOOTER --------------- */
    footer .bottom { margin-top: var(--pixel); }
    footer .inner { grid-template-columns: 1fr 1fr;}
    footer .inner .md { grid-column: -1/1; margin-bottom: var(--pixel);}
    footer ul.socials { margin-top: 1rem; }
    footer .inner address { margin-left: 0; }   
}

@media only screen and (max-width: 600px) {
    :root { 
        --font-size-huge: 12.5vw; 
        --logo-width: 2.5rem; 
        --gutter-top: 1rem; 
        --gutter-side: 1rem;  
        --gutter-side-cuddle: 1rem;  
        --max-width: 100%; 
    }
    
    /* --------------- GENERAL --------------- */
    section.hug .container { width: 100%; }
    
    /* --------------- HEADER --------------- */
    nav#fixed { width: 100%; }
    nav#main ul.top { grid-template-columns: 1fr; grid-template-rows: unset; }
    nav#main ul.top > li { height: var(--pixel-2);  grid-row: unset;}
    nav#main ul.top > li.big { grid-column: unset;  grid-row: unset; min-height: var(--pixel-8); }
    nav#main ul.top > li.social {  grid-row: unset; min-height: var(--pixel-3); }
    nav#main ul.top > li.social ul { display: grid; grid-template-columns: 1fr 1fr; padding-block: var(--pixel-half);}
    nav#main ul.top > li.social ul li { justify-content: flex-start;}
    nav#main ul.top > li.social ul li:nth-of-type(2n) { justify-content: flex-end;}
    
    /* --------------- FOOTER --------------- */
    footer .inner { grid-template-columns: 1fr; }
    footer .bottom { display: flex; flex-direction: column; text-align: center;  margin-top: 0;}
    footer .bottom svg { margin-bottom: var(--gutter-side-cuddle); }
    footer .bottom nav { margin: 0 auto;  padding-bottom: var(--pixel);}
    footer .bottom ul { flex-direction: column; }
    
    /* --------------- FORM --------------- */
    form.custom { --form-columns: 1;  }
    form.custom :is(textarea, input, select) { border-right: 0; }
}


@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
}

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

/* --------------- ANIMATIONS --------------- */
@view-transition {navigation: auto;}