* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.33vw, 22px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; accent-color: var(--my-lime);}
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: "Inconsolata", system-ui, sans-serif;
    --header-font: "Newsreader", system-ui, sans-serif;
    --header-bold-font: "Manrope", system-ui, sans-serif;
    --button-font: "Inclusive Sans", system-ui, sans-serif;

    /* Font weights */
    --font-extra-light: 200; 
    --font-light: 300; 
    --font-regular: 400; 
    --font-medium: 500; 
    --font-semi-bold: 600; 
    --font-bold: 700; 
    --font-extra-bold: 800; 

    /* Font sizes */
    --font-size-huge: 3.8rem;       /* 82px */
    --font-size-h1: 3.33rem;        /* 72px */
    --font-size-h2: 2.6rem;         /* 56px */
    --font-size-h3: 2.1rem;         /* 46px */
    --font-size-h4: 1.85rem;        /* 40px */
    --font-size-h5: 1.66rem;        /* 38px */
    --font-size-h6: 1.2rem;         /* 26px */
    --font-size-body: .925rem;      /* 20px */ 
    --font-size-little: .835rem;    /* 18px */ 
    --font-size-tiny: .75rem;       /* 16px */ 

    
    /* Colors */  
    --main-color: var(--my-black);
    --background-color: var(--my-light-grey);

    --my-white: #FFF; 
    --my-black: #000; 
    --my-lime: #C6F121; 
    --my-grey: #E4E4E4; 
    --my-light-grey: #F5F4F1; 
    --my-almost-white: #F9F8F5; 

    --odf-pink: #EAA0A5;
    --odf-creme: #F9F4EE;

    /* Line heights */
    --line-height-small: 1;
    --line-height-regular: 1.2;
    --line-height-large: 1.6; 

    /* Widths */
    --gutter-side: 1rem;
    --gutter-top: .5rem;
    --max-width: 72rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 55rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 2rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 6rem; 
    --padding-top: 5rem;
    --btn-padding: 1.4em;

    /* Transitions */
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 
    --my-ease: cubic-bezier(.79,.14,.15,.86);
    --title-animation-time: 1000ms;

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

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

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

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6, .h7, .huge  {font-weight: var(--font-light); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; text-transform: uppercase;}
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); } 
.h7, .body {font-size: var(--font-size-body); } 
.huge { font-size: var(--font-size-huge); }
.little { font-size: var(--font-size-little);}
.tiny { font-size: var(--font-size-tiny);}
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6, .huge).strong,
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6, .huge) strong { font-family: var(--header-bold-font); font-weight: var(--font-extra-bold); }

:is(.h1,.h2,.h3,.h4,.h5,.h6,.huge,h1,h2,h3,h4,h5,h6,.animated):not(.not-animated, .ready,.dot) { opacity: 0; }

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main section:first-of-type { padding-top: var(--padding-top); margin-top: 0; }
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, .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;  z-index: 2; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }
body > canvas { position: absolute; top: 0; left: 0;  width: 100%;  z-index: 1; pointer-events: none; opacity: .035;}
/* body.resizing > canvas { display: none; } */

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

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

/* 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; cursor: pointer;  }
button,label { cursor: pointer;  user-select: none; }
.btn { background: var(--my-lime); color: var(--my-black); border-radius: var(--btn-border-radius); text-align: center;   position: relative; overflow: hidden;  isolation: isolate;  display: block;      font-family: var(--button-font); text-transform: uppercase; font-size: var(--font-size-tiny); cursor: pointer;  text-align: center; display: inline-flex;   image-rendering: pixelated; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.btn > div > span { display: block;  padding: var(--btn-padding);  background: var(--my-lime); transition: transform 500ms var(--my-ease), clip-path 500ms var(--my-ease), background 333ms var(--my-ease), color 333ms var(--my-ease); }
.btn > div:first-of-type { position: relative; z-index: 2;  }
.btn > div > span:last-of-type, 
.btn > div:last-of-type { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.btn.has-arrow > div > span::after { content: ""; display: inline-block; margin-left: auto; width: .9em; height: .9em; background: url('/img/icons/arrow-small.svg') 50% 50% / contain no-repeat;  }
.btn.has-arrow :is(div, span) { width: 100%; display: flex; align-items: center;   gap: 1rem;}
.btn.has-arrow span::after { margin-left: auto; }

.btn > div:first-of-type > *:first-of-type { clip-path: inset(0 0 49% 0); }
.btn > div:first-of-type > *:last-of-type { clip-path: inset(49% 0 0 0); }

.btn > div:last-of-type > span { background: var(--my-white); color: var(--my-black);}
.btn > div:last-of-type > *:first-of-type { clip-path: inset(50% 0 50% 0); }
.btn > div:last-of-type > *:last-of-type { clip-path: inset(50% 0 50% 0); }

:is(.btn:not(.burger):hover, input.burger:checked ~ header .btn.burger)  > div:first-of-type > *:first-of-type { transform: translateY(-51%); }
:is(.btn:not(.burger):hover, input.burger:checked ~ header .btn.burger)  > div:first-of-type > *:last-of-type { transform: translateY(51%); }

:is(.btn:not(.burger):hover, input.burger:checked ~ header .btn.burger)  > div:last-of-type > *:first-of-type { clip-path: inset(0 0 0 0); }
:is(.btn:not(.burger):hover, input.burger:checked ~ header .btn.burger)  > div:last-of-type > *:last-of-type { clip-path: inset(0 0 0 0); }

.btn.outlined { background: none; border: 1px solid var(--main-color); }
.btn.outlined > div > span { background: none; }
.btn.outlined > div:last-of-type > span { background: var(--my-lime); }

.btn.white > div > span { background: var(--my-white); }
.btn.white > div:last-of-type > span { background: var(--my-lime); }



/* TRIPPY ANIMATION */
.trip { display: flex; flex-direction: column;  align-items: center;  font-size: 8rem; padding: .75em 0; margin: 0;  position: relative; width: 8.75em;}
.trip { --animation-time: 6.5s;  }
.trip .group { position: absolute; top: 0.5em; left: 0; width: 100%; height: calc(100% - 1em); }
.trip > :is(h1,.h2)  { width: 100%;  margin: 0; display: flex; pointer-events: none; opacity: 0;}
.trip .group:nth-of-type(1) { --delay: calc(var(--animation-time) / 4 * -1); }
.trip .group:nth-of-type(2) { --delay: calc(var(--animation-time) / 4 * 0); }
.trip .group:nth-of-type(3) { --delay: calc(var(--animation-time) / 4 * 1); }
.trip .group:nth-of-type(4) { --delay: calc(var(--animation-time) / 4 * 2); }
.trip .group img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.trip .group img:first-of-type { clip-path: inset(50% 0 50% 0); animation: tripTop var(--animation-time) ease-out var(--delay, 0s) infinite; }
.trip .group img:last-of-type { clip-path: inset(50% 0 50% 0); animation: tripBottom var(--animation-time) ease-out var(--delay, 0s) infinite;  }

@keyframes tripBottom { 
    0% { clip-path: inset(50% 0 50% 0); transform: translateY(0) scale(.99, 0.85); }
    21% { clip-path: inset(50% 0 0 0); transform: translateY(0); }
    49% { clip-path: inset(70% 0 0 0); transform: translateY(.55em); }
    75% { clip-path: inset(85% 0 0 0); transform: translateY(.65em); }
    100% { clip-path: inset(100% 0 0 0); transform: translateY(1em); }
}

@keyframes tripTop { 
    0% { clip-path: inset(50% 0 50% 0); transform: translateY(0) scale(.99, 0.85); }
    21% { clip-path: inset(0 0 50% 0); transform: translateY(-0); }
    49% { clip-path: inset(0 0 70% 0); transform: translateY(-.55em); }
    75% { clip-path: inset(0 0 85% 0); transform: translateY(-.65em); }
    100% { clip-path: inset(0 0 100% 0); transform: translateY(-1em); }
}

/* --------------- TITLE ANIMATION --------------- */
/* Relative span */
.line.t-a { position: relative; }
section.title h1 { max-width: 11em; }
.line.t-a > span { clip-path: inset(0% 0 0% 0);}
.line.t-a > span > span { transform: translateY(-150%); display: inline-block; transition: transform var(--title-animation-time) var(--my-ease); }
strong .line.t-a > span { clip-path: inset(5% 0 0 0);}
strong .line.t-a > span > span { transform: translateY(-110%); transition: transform calc(var(--title-animation-time) * 1.75) var(--my-ease-out) calc(var(--title-animation-time) * .85 + (var(--title-animation-time) * .2) * var(--i)) }


/* Absolute spans */
.line.t-a div > span { position:  absolute; width: 100%; top: 0; left: 0; clip-path: inset(var(--clip) 0 var(--clip) 0); }
.line.t-a div > span > span { transform: translateY(-100%); display: inline-block;  transition: transform calc(var(--title-animation-time) * 2) ease calc(var(--title-animation-time) * 0.025);}
.line.t-a div > span:nth-of-type(1) { transform: translateY(-90%); --clip: 15%;  }
.line.t-a div > span:nth-of-type(2) { transform: translateY(calc(-90% - 60%)); --clip: 20% }
.line.t-a div > span:nth-of-type(3) { transform: translateY(calc(-90% - 60% - 45%)); --clip: 30% }
.line.t-a div > span:nth-of-type(4) { transform: translateY(calc(-90% - 60% - 45% - 35%)); --clip: 35% }
.line.t-a div > span:nth-of-type(5) { transform: translateY(calc(-90% - 60% - 45% - 35% - 30%)); --clip: 40% }


[data-animate=true] .line.t-a:first-child.first > span > span { transform: translateY(10%); }
[data-animate=true] .line.t-a span > span { transform: translateY(0%); }
[data-animate=true] .line.t-a div > span > span { transform: translateY(100%); }


/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10;   display: flex;  pointer-events: none; --menu-button-width: 3.35rem; }
header img, header svg { width: 100%; transition: filter 250ms var(--my-ease), color 250ms var(--my-ease) 500ms;}
header[data-light=true] svg {  color: var(--my-white); }
header[data-light=true] nav#desktop { color: var(--my-white);}
input.burger:checked ~ header svg, header[data-light=false] svg { color: var(--my-black); transition-delay: 0s;}

header[data-light=false] nav#desktop .buttons .btn > div:last-of-type span { background: transparent;  }
header[data-light=false] nav#desktop .buttons .btn:hover { border: 1px solid var(--my-black);}

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: var(--gutter-top) 0;  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-transform: uppercase; }
nav#desktop .logo a { display: flex;  pointer-events: all;  transition: transform 500ms var(--my-ease); z-index: 2; }
nav#desktop > div.logo { margin-right: auto;  display: flex; align-items: center;   gap: 1rem; }
nav#desktop > div.logo svg {max-width: var(--logo-width); padding: .5em 0; }
nav#desktop > .buttons { margin-left: auto;  pointer-events: all; padding-left: 1rem; white-space: nowrap;}
nav#desktop > .buttons .btn {  border: 1px solid transparent;  transition: border 500ms var(--my-ease); background: none;}

nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center; margin-right: auto;  transition: opacity 500ms; }
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex;  pointer-events: all;}
nav#desktop > ul li:is(.active, :hover) > a { text-decoration: underline;}
nav#desktop > ul > li:first-of-type {margin-right: auto; max-width: var(--logo-width); }
nav#desktop > ul > li:not(:first-of-type) {margin-left: 1.5rem; }
nav#desktop > ul > li:not(:first-of-type) > a { padding: .6rem;  }
nav#desktop > ul > li:last-of-type > a {padding-right: 0;}


/* MOBILE NAV */
nav#mobile { position: absolute; top: var(--gutter-top); left: 0; right: 0;  width: var(--width); max-width: var(--max-width); margin: 0 auto;  pointer-events: none;}
nav#mobile .inner { margin-left: calc(var(--menu-button-width) + .5rem);  max-width: max-content;  padding: 6rem .5rem 1rem; isolation: isolate; position: relative;   border-radius: var(--btn-border-radius); overflow: hidden; }
nav#mobile .inner::before { background: var(--my-white); border-radius: var(--btn-border-radius); z-index: -1; content: ""; position: absolute; top: 0; left: 0;  width: 100%; height: 100%;  transform: scaleY(0); transform-origin: top ; transition: transform 500ms var(--my-ease) 250ms; }
nav#mobile .inner .stagger { opacity: 0; transition: opacity 333ms var(--my-ease) 0ms, transform 333ms var(--my-ease) 500ms;   transform: translateY(-1rem);}
nav#mobile .inner > ul { display: flex; flex-direction: column; text-transform: uppercase; font-weight: var(--font--bold); font-size: var(--font-size-h6); font-weight: var(--font-semi-bold);}
nav#mobile .inner > ul > li { display: flex; opacity: 0;  }
nav#mobile .inner > ul > li > a { padding: 0.25rem .5rem;  }

nav#mobile .bottom { padding: 4rem 4rem 1rem .5rem; display: flex; gap: 4rem;  font-size: var(--font-size-tiny); text-transform: uppercase;}
nav#mobile .bottom ul { display: flex; flex-direction: column;  align-items: flex-start;  font-family: var(--primary-font);}

nav#mobile .bottom > a::after { content: ""; display: inline-block; margin-left: .6em;  width: .6em; height: .6em; background: url('/img/icons/arrow-thin.svg') 50% 50% / contain no-repeat;}

/* Burger */
input.burger { display: none; }
label.burger { font-family: var(--primary-font);  font-size: var(--font-size-little);  flex-shrink: 0; pointer-events: all;}
label.burger.btn > div > span { padding-inline: 0; width: var(--menu-button-width); background: var(--my-white); color: var(--my-black);  }

input.burger:checked ~ header .logo a { transform: translateX(.5rem);  }
input.burger:checked ~ header nav#mobile .inner { pointer-events: all;}
input.burger:checked ~ header nav#mobile .inner ul { opacity: 1; }
input.burger:checked ~ header nav#mobile .inner::before {  transform: none; transition-delay: 0s; }
input.burger:checked ~ header nav#mobile .inner .stagger { opacity: 1; transform: none; transition: opacity 333ms var(--my-ease) calc(250ms + var(--i,0) * 25ms), transform 333ms var(--my-ease) calc(125ms + var(--i,0) * 25ms);}

/* --------------- FOOTER --------------- */
footer { display: flex; flex-direction: column;  background: linear-gradient(to top, var(--my-lime) -10%,  transparent 25%, transparent 100%); }
footer .container { margin: 4rem auto 0; display: grid; grid-template-columns: 1.2fr .5fr .5fr; align-items: flex-start; justify-items: flex-start; grid-gap: var(--gap);}
footer .prose { text-transform: uppercase; max-width: 18em;}

footer nav li { margin-bottom: .6em;}
footer nav a { font-family: var(--header-bold-font); text-transform: uppercase;  font-size: var(--font-size-tiny); display: inline-block; }
footer nav a::after { content: ""; display: inline-block; margin-left: .6em;  width: .9em; height: .9em; background: url('/img/icons/arrow-small.svg') 50% 50% / contain no-repeat;  transform: rotate(-45deg); }

footer nav .btn.btn { border-radius: 100vmin; text-transform: none; border-color: var(--my-grey); font-family: var(--header-bold-font); }
footer nav .btn.has-arrow > div > span::after { margin-left: .6em; transform: translateY(.2em) rotate(-45deg);}
footer nav .btn > div > span { padding-block: 0.75em; font-weight: var(--font-semi-bold); }

footer .transformer { margin-top: 4rem; max-width: 26rem; width: 100%; }
footer .transformer > img { width: 100%; transition: clip-path 1000ms var(--my-ease); clip-path: inset(50% 0 50% 0); }
footer .transformer:not(.activate) img {  clip-path: inset(0 0 0 0); }

footer .newsletter { font-size: var(--font-size-tiny); text-transform: uppercase; display: flex; flex-direction: column; }
footer .newsletter ~ * { align-self: flex-end;}
footer .newsletter form.custom { position: relative;   margin-top: 1.5rem; }
footer .newsletter form.custom input { text-align: left; padding: .5em 0;  width: 100%;  grid-column: -1/1; background: none; border-radius: 0; border: none; border-bottom: 2px solid var(--my-black);   }
footer .newsletter form.custom input::placeholder { opacity: 1; color: var(--my-black); }
footer .newsletter form.custom button { position: absolute; height: 100%; width: 2rem; right: 0; top: 0; background: url('/img/icons/arrow-bold.svg') 100% center / 40% 40% no-repeat;  }

footer .trip { font-size: 3rem; }
footer .bottom { grid-column: -1/1; display: flex; align-items: center; justify-content: space-between; width: 100%;  text-transform: uppercase; font-size: var(--font-size-tiny); font-weight: var(--font-medium);   padding: 2rem 0;  position: relative; }
footer .bottom::before { width: 100vw; height: 1px; top: 0; left: 50%; transform: translateX(-50%); display: inline-block; content: ""; background: var(--main-color); position: absolute;   }

ul.socials { display: flex; align-items: center; gap: 0.4rem; --icon-size: 2.4rem;  }
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;  border: 1px solid var(--my-black); border-radius: 50%;  padding: .7rem;  transition: transform 250ms var(--my-ease), background 250ms var(--my-ease); }
ul.socials:not(.written) li svg { width: var(--icon-size); height: var(--icon-size);   transition: transform 250ms var(--my-ease);}
ul.socials:not(.written) li a:hover { transform: scale(1.1); background: var(--my-lime); }
ul.socials:not(.written) li a:hover svg { transform: scale(1.2);  }

ul.socials.written { display: grid; grid-gap: 0; grid-template-columns: 1fr 1fr; grid-gap: .69em 4em; font-family: var(--header-bold-font);  text-transform: uppercase; font-size: var(--font-size-tiny); }
ul.socials.written li { justify-content: flex-start;}


@media only screen and (max-width: 950px) {
    footer .container { grid-template-columns: 1fr 1fr 1fr; }
    footer .trip { font-size: 3.4vw; }
}

@media only screen and (max-width: 700px) {
    footer .container { grid-template-columns: 1fr 1fr; }
    footer .container :is(.newsletter, .transformer) { grid-column: -1/1;}
    footer .container .transformer { margin-top: 2rem;}
    footer .trip { font-size: 10.4vw; }

    footer .bottom { flex-wrap: wrap;  gap: .5rem;}
}

@media only screen and (max-width: 425px) {
    footer .container { grid-template-columns: 1fr; }
    footer ul.socials.written { width: 100%; grid-row-gap: 1.5em; }
}

/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { background: var(--my-black); height: 80vh; overflow: hidden;}
section.landing .container { margin: 0 auto; height: 100%; }
section.landing .transformer { position: absolute; width: calc(100% + var(--gutter-side) * 2); bottom: 0; left: calc(var(--gutter-side) * -1); transition: 750ms var(--my-ease-out); display: flex; justify-content: center;   }
section.landing .transformer .trip {  transform: translateY(20%); }
section.landing .transformer .logo {  transform: translateY(100%); }
section.landing .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.landing .media > * { object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


@media only screen and (max-width: 1215px) {
    section.landing .trip { font-size: 10.5vw;}
}
/* =========================================================== */
/* ========================== INTRO ========================== */
/* =========================================================== */
section.intro { background: linear-gradient(to bottom, var(--my-lime) 0%, var(--my-lime) 8%, transparent 25%, transparent 100%);}
section.light-title h2 { font-weight: var(--font-extra-light); max-width: 11em;  }
section.light-title h2 strong { font-weight: var(--font-semi-bold);}
section.intro .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); align-items: flex-start; }
section.intro figure { grid-row: span 2; }
section.intro figure picture + picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(50% 0 50% 0);   transition: clip-path 750ms var(--my-ease);}
section.intro figure picture + picture img { transition: transform 750ms var(--my-ease); }
section.intro figure:hover picture + picture { clip-path: inset(0 0 0 0);}
section.intro figure:hover picture + picture img { transform: scale(1.05);}
section.intro article { display: grid; grid-template-columns: auto 1fr; align-items: flex-start;  grid-gap: .5rem 6.5rem; font-size: var(--font-size-h6);  margin-top: auto; }
section.intro article p:first-of-type::before { display: inline-block; content: ""; width: 2em; height: 1px;  background: var(--main-color);  position: relative; margin-bottom: 0.25em; margin-right: 0.75em; }
section.intro article .h6 {  font-family: var(--primary-font); line-height: var(--line-height-regular); text-transform: none; opacity: .4;}

@media only screen and (max-width: 1024px) {
    section.intro article { grid-template-columns: 1fr;}
}


@media only screen and (max-width: 768px) {
    section.intro .container { grid-template-columns: 1fr;}
    section.intro .container .h2 { margin-bottom: 0;}
}



/* ========================================================== */
/* ====================== TEXT SLIDER ======================= */
/* ========================================================== */
section.slider {  max-width: 100vw; width: 100%;  user-select: none;  overflow: hidden; display: flex; align-items: center;  padding: 1.5rem 0; background: var(--hover-color, var(--my-lime)); transition: background 250ms; }
section.slider::before { display: none; }
section.slider .container { margin: 0 auto;  display: flex; flex-direction: column; align-items: center;  }

section.slider div > ul { display: flex;  width: max-content; align-items: center;  will-change: transform;  }
section.slider div > ul ul { display: flex; --slider-gap: 1.5em; align-items: center; }
section.slider div > ul ul li { font-size: var(--font-size-h5); font-family: var(--fancyFont);  white-space: nowrap; display: flex; align-items: center; justify-content: center;  position: relative; width: auto;  text-transform: uppercase; font-weight: var(--font-medium);}
section.slider div > ul ul li::after { content: "/"; display: inline-block; margin: 0 var(--slider-gap);}


@media only screen and (max-width: 768px) {
    section.slider div > ul ul { --slider-gap: 1.5rem;}
    section.slider div > ul li img { max-width: 10rem; }
}
 

/* =========================================================== */
/* ======================= TEAM SLIDER ======================= */
/* =========================================================== */
section.team { overflow: hidden; padding: var(--margin-y) 0; }
section.team .container { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows:  auto 1fr; grid-gap: calc(var(--gap) * 1.5); align-items: flex-start;  margin: 0 auto;  } 
section.team .container > a { display: flex; align-items: flex-end;  margin: auto 0 0 auto;  order: -1; }
section.team .container > a .h4 { display: flex; flex-direction: column; margin-bottom: 0; }
section.team .container > a svg { width: var(--font-size-h4); height: auto;  margin-left: calc(var(--font-size-h4) * .75);  transition: transform 250ms var(--my-ease);}
section.team .container > a:not(.activate) svg { transform: rotate(-45deg);}
section.team .container > a:hover svg { transform: rotate(-45deg) translateX(.2em);}

section.team .has-team { text-transform: uppercase; max-width: 28em; position: relative;  order: 3; margin: 0; }
section.team article svg { width: .85em; height: auto; }
section.team article .prose { margin-top: 1.5rem; }
section.team article .socials { display: none; }
section.team article .deets { padding: 0; }

section.team .has-team div { transition: clip-path 500ms var(--my-ease), transform 500ms var(--my-ease);  clip-path: inset(0 0 0 0); }
section.team .has-team div[aria-hidden] { position: absolute; left: 0; max-width: 28em;  top: 0; transform: translate(1rem, 0); clip-path: inset(0 0 0 100%); }
section.team .has-team div[aria-hidden=false] { clip-path: inset(0 0 0 0); transform: translateY(0); }
section.team .has-team div[aria-hidden=false] ~ div:last-of-type { clip-path: inset(0 100% 0 0); transform: translateX(-1rem); }

section.team .overflower-parent { grid-row: span 2; position: relative; }
section.team .overflower-parent .overflower {  overflow: auto; width: calc(100% + var(--calculated-gutter));  padding: 4rem 0; margin: -4rem 0; scroll-snap-type: x mandatory;  order: 1; scroll-behavior: smooth; }
section.team .overflower-parent ul { display: flex;  gap: 1rem; pointer-events: none; }
section.team .overflower-parent ul li { flex-shrink: 0; max-width: 22rem;  pointer-events: all; transition: filter 333ms ease, transform 333ms ;}
section.team .overflower-parent ul:hover li:not(:hover) { filter: blur(.25rem); transform: scale(.97);}
section.team .overflower-parent ul::after { content: "";  flex-shrink: 0; width: calc(var(--gutter-side) * 2); opacity: 0; pointer-events: none;}
section.team .overflower-parent picture.svg { height: 100%; }
section.team .overflower-parent picture.svg img  { height: 100%; object-fit: cover;}

section.team .ctrl-btns { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; opacity: 0; pointer-events: none; transition: opacity 500ms var(--my-ease); }
section.team .ctrl-btns button:first-of-type { transform: scaleX(-1); margin-left: 1rem; }
section.team .container:hover .ctrl-btns { opacity: 1; }

.teamcard { position: relative; scroll-snap-align: start;  scroll-margin-left: .5rem; overflow: hidden;}
.teamcard video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 333ms ease;}
.teamcard:hover video {  opacity: 1;}
.teamcard .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; color: var(--my-white); padding: 0 1.2rem 2rem; transform: translateY(1rem); opacity: 0; transition: transform 333ms var(--my-ease), opacity 333ms var(--my-ease);  display: flex; flex-direction: column; justify-content: flex-end; }
.teamcard .overlay .h6 { font-size: var(--font-size-tiny); font-family: var(--header-bold-font);  display: flex; justify-content: space-between;}
.teamcard .overlay .h6 svg { width: .7em; height: auto; display: inline-block; margin-left: .75em; }

.teamcard:hover .overlay { opacity: 1; transform: none;}

.teamcard .event { position: absolute; bottom: 2rem; width: calc(100% - 4rem); left: 0; right: 0; margin: 0 auto; background: var(--my-white);  padding: .5rem;  border-radius: var(--border-radius); display: flex;  transition: transform 500ms var(--my-ease); transform: translateY(calc(100% + 2.5rem)); }
.teamcard .event picture { max-width: 8rem; border-radius: calc(var(--border-radius) * .666); overflow: hidden;}
.teamcard .event .inner { padding: 1rem;  display: flex; flex-direction: column; }
.teamcard .event .inner span { display: flex; align-items: center;   font-size: var(--font-size-tiny); text-transform: uppercase; font-family: var(--button-font); margin-top: auto; opacity: .75; }
.teamcard .event .inner svg { width: .6em; height: auto;  transform: rotate(-90deg); margin-left: .75em; }

body.touch section.team .overflower-parent { scroll-snap-type: x mandatory;}
body.touch section.team .overflower-parent li { scroll-snap-align: start;}

@media only screen and (min-width: 1600px) {
    section.team .overflower-parent ul::after { content: "";  flex-shrink: 0; width: calc(22rem - 3rem); opacity: 0; pointer-events: none;}
}

@media only screen and (max-width: 1024px) {
    section.team .overflower-parent ul li { max-width: 17rem; }
}

@media only screen and (max-width: 768px) {
    section.team .container { grid-template-columns: 1fr;}
    section.team .overflower-parent ul::before { content: "";  flex-shrink: 0; width: var(--gutter-side); opacity: 0; pointer-events: none;}
    section.team .overflower-parent ul::after { width: var(--gutter-side);}
    section.team .overflower-parent { width: calc(100% + var(--gutter-side) * 2); margin-left: calc(var(--gutter-side) * -1);  }
    .teamcard { scroll-snap-align: center;}
}

/* =========================================================== */
/* ======================== FULL TEAM ======================== */
/* =========================================================== */
section.full-team {background: linear-gradient(to top, var(--my-lime) -15%, transparent 25%, transparent 100%);}
section.full-team ul.list { display: none;}

section.full-team:not(.has-button) {background: linear-gradient(to top, var(--my-lime) -15%, transparent 25%, transparent 100%);}
section.full-team:not(.has-button) .split:first-of-type { margin-bottom: 5rem;}

section.full-team .split { display: grid; grid-template-columns: 2fr 1fr;  align-items: flex-end;   grid-gap: 6.5rem;}
section.full-team .split .h1 { font-size: var(--font-size-huge); text-align: center; max-width: unset; grid-column: -1/1; margin-bottom: 0;}
section.full-team .split:first-of-type .h3 { margin-bottom: 0; }
section.full-team .split:first-of-type { margin-bottom: 6.5rem;}

section.full-team figure ul { display: flex; flex-direction: row-reverse;  gap: 1rem; align-items: flex-end; }
section.full-team figure ul li { flex-shrink: 0;  width: calc(30% - .5rem); }
section.full-team figure ul li:first-of-type { width: calc(70% - .5rem); }
section.full-team figure button { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
section.full-team figure button:first-of-type { left: calc(30% + .5rem); transform: translate(-50%, -50%) scaleX(-1);  opacity: 0;}
section.full-team figure:hover button:first-of-type { opacity: 1;}

section.full-team .texts { align-self: flex-start; text-transform: uppercase; margin-top: 2rem; transition: height 500ms var(--my-ease); }
section.full-team .texts article { position: absolute; clip-path: inset(0 0 0 0); }
section.full-team article svg { width: .85em; height: auto; }
section.full-team article .prose { margin-top: 1.5rem;  }
.deets { display: flex; align-items: center; gap: .5rem 1.5rem; flex-wrap: wrap;}
.deets li { display: flex;  align-items: center;  gap: .6rem;}

section.full-team .strength { position: relative; display: flex; gap: .6rem; align-items: flex-start; }
section.full-team .strength svg { margin-top: .2em; flex-shrink: 0;}

section.full-team .socials { padding-left: 0; gap: .5rem; }

section.full-team .teamcard { isolation: isolate; scroll-margin-top: var(--padding-top); }
section.full-team .teamcard > picture { clip-path: inset(0 0 0 0);}
section.full-team .teamcard > picture.svg {width: 100%; padding-bottom:  138.4%; height: 0;  }
section.full-team .teamcard > picture.svg img {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
section.full-team .teamcard .overlay { display: none; }
section.full-team .teamcard > picture.cloned { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform: translateX(-.5rem); clip-path: inset(0 100% 0 0);}
section.full-team .teamcard > picture.cloned.back {  transform: translateX(.5rem); clip-path: inset(0 0 0 100%);}


section.full-team .switcher .teamcard:first-of-type:hover .event { transform: none; transition-delay: 1.5s;}

section.full-team .switcher.animating .texts article { transition: clip-path 800ms var(--my-ease) 200ms, transform 800ms var(--my-ease) 200ms; }
section.full-team .switcher.animating .teamcard > picture { transition: clip-path 500ms var(--my-ease) var(--delay, 0s), transform 500ms var(--my-ease) var(--delay, 0s); }
section.full-team .switcher.animating .teamcard > picture.cloned { clip-path: inset(0 0 0 0); transform: none; }

section.full-team .switcher.animating[data-dir="1"] .teamcard > picture { clip-path: inset(0 0 0 100%); transform: translateX(1rem);}
section.full-team .switcher.animating[data-dir="1"] .teamcard > picture.cloned:not(.back) { clip-path: inset(0 0 0 0); transform: none; }
section.full-team .switcher.animating[data-dir="-1"] .teamcard > picture { clip-path: inset(0 100% 0 0); transform: translateX(-1rem);}
section.full-team .switcher.animating[data-dir="-1"] .teamcard > picture.cloned.back { clip-path: inset(0 0 0 0); transform: none; }

section.full-team .switcher .texts article[data-visible=false] { clip-path: inset(0 0 0 100%); transform: translateX(1rem);}
section.full-team .switcher .texts article[data-visible=true] {  clip-path: inset(0 0 0 0); }

section.full-team .switcher[data-dir="1"] .texts article[data-next=true] { clip-path: inset(0 100% 0 0); transform: translateX(-1rem); }
section.full-team .switcher[data-dir="-1"] .texts article[data-previous=true] { clip-path: inset(0 100% 0 0); transform: translateX(-1rem); }

/* MOBILE SETUP */
section.full-team ul.list > li { scroll-margin-top: var(--padding-top); }
section.full-team ul.list > li > div { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--margin-y); grid-gap: 1.5rem;  width: 100%; margin-top: 2rem;  overflow: auto; scroll-snap-type: x mandatory; }
section.full-team ul.list > li .h1 { grid-column: -1/1; margin: 0 auto;   width: var(--width);}
section.full-team ul.list > li .h1:has(.next) ~ div > * { clip-path: inset(0 0 0 0);}
section.full-team ul.list > li :is(.teamcard,article) { clip-path: inset(0 100% 0 0); transition: clip-path 500ms var(--my-ease) 500ms;  scroll-snap-align: center;}
section.full-team ul.list > li .teamcard { margin-left: var(--gutter-side);}
section.full-team ul.list > li > div > article { margin-top: 1rem;  transition: clip-path 800ms var(--my-ease) 900ms !important; margin-right: var(--gutter-side);}

@media only screen and (max-width: 1215px) {
    section.full-team .switcher { grid-gap: 3rem;}
}


@media only screen and (max-width: 950px) {
    section.full-team .switcher { display: none; }
    section.full-team ul.list { display: block;} 
    section.full-team .split:first-of-type { grid-template-columns: 1fr;  grid-gap: 1rem;}
    section.full-team .split:first-of-type  .btn {  width: 100%; max-width: 15rem; }
}

@media only screen and (max-width: 768px) {
    section.full-team .split .h1 { font-size: var(--font-size-h1); text-align: left;}
    section.full-team:not(.has-button) .split:first-of-type { margin-bottom: 2rem; }
    section.full-team ul.list > li { margin-left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2); max-width: 100vw; }
    section.full-team ul.list > li :is(.teamcard,article) { width: 20.5rem; }
}
@media only screen and (max-width: 500px) {
    section.full-team ul.list > li .teamcard { width: 16rem; height: 100%; }
    section.full-team ul.list > li .teamcard picture { height: 100%; }
    section.full-team ul.list > li .teamcard picture img { object-fit: cover;}
}


/* =========================================================== */
/* ===================== TITLE AND VIDEO ===================== */
/* =========================================================== */
section.grow-video { background: linear-gradient(to bottom, var(--my-lime) 0%, var(--my-lime) 8%, transparent 25%, transparent 100%); border-top: 1px solid #F5F4F1; z-index: 2; }
section.grow-video .container { display: flex; flex-direction: column; align-items: center;  margin-bottom: 0;}
section.grow-video .h1 { text-align: center;  } 
section.grow-video figure { max-width: var(--max-width-narrow); margin-top: 3rem;   width: calc(var(--width) - 2rem); }
section.grow-video .video { display: flex;  transition: 750ms var(--my-ease-out);  overflow: hidden;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.grow-video .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
section.grow-video .transformer { width: 100%; height: 0; padding-bottom: 62.5%;  transform: scale(0); }
section.grow-video .transformer > span { position: absolute; width: 1.2rem; height: 1.2rem;  transform: scale(var(--neg-scale));  --border: 1px solid var(--my-black);  }
section.grow-video .transformer > span:nth-of-type(1) { top: -2.4rem; left: -2.4rem; border-bottom: var(--border); border-right: var(--border); }
section.grow-video .transformer > span:nth-of-type(2) { top: -2.4rem; right: -2.4rem; border-bottom: var(--border); border-left: var(--border); }
section.grow-video .transformer > span:nth-of-type(3) { bottom: -2.4rem; left: -2.4rem; border-top: var(--border); border-right: var(--border); }
section.grow-video .transformer > span:nth-of-type(4) { bottom: -2.4rem; right: -2.4rem; border-top: var(--border); border-left: var(--border); }


@media only screen and (max-width: 768px) {
    section.grow-video .h1 { font-size: var(--font-size-h2);}
}

/* =========================================================== */
/* ========================= COURSES ========================= */
/* =========================================================== */
section .dot { font-weight: var(--font-semi-bold); font-family: var(--header-bold-font);}
section .dot::before { content: ""; width: .4em; height: 0.4em; display: inline-block; margin-right: .5em; background: currentColor; border-radius: 50%; margin-bottom: .2em; }
section.courses.light-title :is(.h3, .h4) { font-weight: var(--font-extra-light);  margin-bottom: 0;}
section.courses.light-title :is(.h3, .h4) strong { font-weight: var(--font-semi-bold); display: block; }
section.courses .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap);  margin-bottom: 3rem; }
section.courses .prose { text-transform: uppercase; max-width: 26em;}
section.courses .dot { margin-bottom: 3rem; grid-column: -1/1; }
section.courses .overflower { max-width: 100vw;  overflow: auto; scroll-snap-type: x mandatory;  padding-block: 2rem; margin-block: -2rem; scroll-behavior: smooth; } 
section.courses .overflower > ul { display: flex; gap: 1rem; max-width: var(--max-width); margin: 0 auto; width: var(--width); }
section.courses .overflower > ul::after { width: var(--gutter-side); content: ""; flex-shrink: 0; }

li.course { position: relative; color: var(--my-white); width: 35rem;  flex-shrink: 0; scroll-snap-align: center;}
li.course img { border-radius: var(--border-radius);}
li.course .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 2; padding: 1.6rem;  display: flex; flex-direction: column; justify-content: space-between;}

li.course.placeholder {  width: 29rem;}
li.course.placeholder picture { height: 100%;  filter: blur(.25rem);}
li.course.placeholder picture img { object-fit: cover;}

section.has-controls .overflower-parent { position: relative;  margin-bottom: var(--margin-y); }
section.has-controls .ctrl-btns { display: flex; align-items: center; justify-content: space-between;  position: absolute; width: var(--width); left: 0;right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); max-width: calc(var(--max-width) + 2rem); pointer-events: none; z-index: 2; } 

.circle-arrow { padding: 1.2rem; width: 3.7rem; height: 3.7rem; background: var(--my-white); border-radius: 50%; display: grid; place-items: center; transition: opacity 250ms, transform 250ms;  pointer-events: all;}
.circle-arrow svg { transform: translateX(.05em); transition: transform 250ms var(--my-ease);}
.circle-arrow:hover svg { transform: translateX(.2em); }
a:hover .circle-arrow svg { transform: translateX(.2em); }

section.has-controls .ctrl-btns button:first-of-type { transform: scaleX(-1);}

section.has-controls .overflower[data-left=true] + .ctrl-btns button:first-of-type,
section.has-controls .overflower[data-right=true] + .ctrl-btns button:last-of-type { opacity: 0; pointer-events: none;}

body.touch section.has-controls .ctrl-btns { display: none; }

section.courses:has(>.btn) .overflower-parent { margin-bottom: 2rem;}
section.courses > .btn { margin: 0 auto var(--margin-y); }


@media only screen and (max-width: 768px) {
    section.courses .container { grid-template-columns: 1fr;}
    li.course { width: 75vw;}
    li.course.placeholder { width: 64vw; }
}



/* =========================================================== */
/* ===================== UPCOMING EVENT ====================== */
/* =========================================================== */
section.upcoming-event .container { width: 100%; max-width: var(--max-width-ultra-wide); margin: 0 auto;  }
section.upcoming-event .video { display: flex; }
section.upcoming-event .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; padding: 1.5rem; display: flex; justify-content: flex-end; align-items: flex-end;   }
section.upcoming-event .h6 { margin: 0; align-items: center; display: flex; justify-content: space-between; width: 100%;  mix-blend-mode: difference;  color: var(--my-white);  position: absolute; top: 0; left: 0;  width: calc(100% - 3rem);  margin: 0 auto; right: 0; top: 50%; transform: translateY(-50%);  font-family: var(--primary-font);}
section.upcoming-event .btn { min-width: 25%; }
section.upcoming-event .btn :is(div, div > span) { width: 100%; display: flex; align-items: center;}
section.upcoming-event:last-of-type .container { margin-bottom: 0;}


@media only screen and (max-width: 768px) {
    section.upcoming-event .overlay { padding: 1rem; }
}

/* =========================================================== */
/* ============= TEXT, VISION, PARTNERS, IMAGES ============== */
/* =========================================================== */
section.vision { padding-bottom: 0;  overflow: visible; contain: layout style; z-index: unset; z-index: 3; }
section.vision .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.vision .bg > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: url('/img/bg.svg') center center / cover no-repeat ;  transform: scaleX(-1); }
section.vision .container { display: flex; flex-direction: column; align-items: center; text-align: center; margin: var(--margin); z-index: 2;}
section.vision .container h1 strong { display: inline-block; max-width: 11em; }
section.vision .prose { max-width: 21em; margin: 0 auto; text-transform: uppercase; }
section.vision .btn { margin-top: 2rem; }

section.vision .vision { max-width: 22em; margin-right: 0; text-align: left; margin-top: var(--margin-y); }
section.vision .partners { margin-block: 3rem; padding-bottom: 0; overflow: hidden;  max-width: 100vw;}  
section.vision .partners ul li::after { content: "";  }

section.vision .bg figure { position: absolute; will-change: transform; backface-visibility: hidden; }
section.vision .bg figure:nth-of-type(1) { top: 5%; left: 40%; width: 10%; }
section.vision .bg figure:nth-of-type(2) { top: 35%; left: 5%; width: 15%; }
section.vision .bg figure:nth-of-type(3) { top: 24%; right: 7%; width: 20%;  z-index: 3;}
section.vision .bg figure:nth-of-type(4) { bottom: -10%; left: 20.5%; width: 23%;  z-index: 3; }

@media only screen and (max-width: 1215px) {
    section.vision .bg figure:nth-of-type(3) { top: 35%;}
}

@media only screen and (max-width: 768px) {
    section.vision .h1 { font-size: var(--font-size-h3);}
    section.vision .bg figure:nth-of-type(1) { width: 16%; left: 35%; top: 7%; }
    section.vision .bg figure:nth-of-type(2) { width: 20%; left: 3%; }
    section.vision .bg figure:nth-of-type(3) { right: 2%;}
}
@media only screen and (max-width: 600px) {
    section.vision .bg figure:nth-of-type(2) { width: 35%; left: -13%; top: 45%; }
    section.vision .bg figure:nth-of-type(3) { right: 2%; top: 42%; width: 25%; z-index: unset; }
    section.vision .bg figure:nth-of-type(4) { width: 40%; bottom: unset; top: 100%; left: 8%; }
}

/* =========================================================== */
/* ===================== FULLWIDTH MEDIA ===================== */
/* =========================================================== */
section.media:first-of-type { padding-top: 0; }
section.media .media { overflow: hidden; }
section.media .media { height: 0; width: 100%; padding-bottom: 56.25%;  position: relative; }
section.media .media > *:not(.floater) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
section.media .video.floater { cursor: none;  }

:is(.button, button).floater { width: 9rem; height: 9rem; border: 1px solid var(--my-white); background: none; border-radius: 100vmin; color: var(--my-white); display: flex; align-items: center; justify-content: center;  gap: 0.3em; position: absolute; top: 50%; left: 50%; transform: translate3d(var(--x, -50%), var(--y, -50%), 0) rotateZ(0); -webkit-transform: translate3d(var(--x, -50%), var(--y, -50%), 0) rotateZ(0); -webkit-transition: 100ms var(--my-ease-out); will-change: transform; display: inline-flex;  z-index: 2; cursor: pointer; transition: 100ms var(--my-ease-out); pointer-events: none;   align-items:  center;  }
.media video[data-muted=false] ~ :is(.button, button).floater {   -webkit-transition: 750ms; transition: 750ms var(--my-ease-out); --scale: 1; }


section.media.has-text .media { padding-bottom: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
section.media.has-text .text { min-height: 60vh; justify-content: center;  display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--my-white); text-transform: uppercase;}
section.media.has-text .text p { max-width: 22em; margin-bottom: 2rem; }
section.media.has-text .text .btn.outlined { border: 1px solid white;}
section.media.has-text .text .btn.outlined > div:first-of-type { color: var(--my-white); }
section.media.has-text .text .btn.outlined > div:last-of-type span { background: var(--my-white); }

@media only screen and (max-width: 768px) {
    section.media:first-of-type .video {  padding-bottom: 120%; }
    :is(.button, button).floater  { width: 7rem; height: 7rem;}
}


/* =========================================================== */
/* ========================== STORY ========================== */
/* =========================================================== */
section.story { z-index: unset;}
section.story .container { display: flex; flex-direction: column; align-items: center; color: var(--my-white);   text-align: center; color: var(--my-white); margin: var(--gutter-side) auto; padding: calc(var(--margin-y) + 3rem) 0; z-index: 2;}
section.story .container .btn { margin-top: 1.5rem; }
section.story .container .btn.outlined { border: 1px solid white;}
section.story .container .btn.outlined > div:first-of-type { color: var(--my-white); }
section.story .container .btn.outlined > div:last-of-type span { background: var(--my-white); }

section.story .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%;   background: var(--my-black);}
section.story .media img { object-fit: cover; transition: opacity 1000ms var(--my-ease);}

section.story .overlay {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border-radius: var(--border-radius); pointer-events: none; opacity: 0; background: var(--my-almost-white); transition: opacity 1000ms var(--my-ease) 500ms, transform 2000ms var(--my-ease); transform: scale(.8); display: grid; grid-template-columns: 1fr 2fr 1fr; padding: 3rem; grid-gap: 4rem; }
section.story .overlay::before { width: 50%; padding-bottom: 50%; background: radial-gradient(circle, var(--my-lime), transparent 70%); content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.5);   border-radius: 50%; filter: blur(10rem);  opacity: .35; transition: transform 2000ms var(--my-ease) 500ms; }

section.story .overlay .buttons { display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; align-items: center; justify-content: space-between; height: 100%; padding-block: 1.5rem;  z-index: 2; position: absolute; width: 100%; }
section.story .overlay .buttons button { --size: 2.4rem;  width: var(--size); height: var(--size); border-radius: 50%;  }
section.story .overlay button.close { background: var(--my-white); border: 1px solid var(--my-grey); display: flex; align-items: center; justify-content: center; }
section.story .overlay button.close:hover { rotate: 90deg; }
section.story .overlay button.close::before,section.story .overlay button.close::after { content: ""; width: .8rem; height: 2px; border-radius: 2px; background: var(--main-color); transform: rotate(var(--r,-45deg)); position: absolute;  }
section.story .overlay button.close::after { --r: 45deg; }

section.story .overlay button.audio { --size: 1.5rem; border: 1px solid var(--main-color);  display: grid; place-items: center; }
section.story .overlay button.audio svg { width: .6rem; height: auto; color: var(--my-black); transition: 250ms; }
section.story .overlay button.audio svg path { fill: var(--my-black); transition: transform 250ms; transform-origin: right;}
section.story .overlay button.audio:hover { scale: 1.2; }
section.story .overlay button.audio:hover svg  { scale: 1.1; }

section.story .overlay picture { height: 100%; width: 100%;  }
section.story .overlay picture img  { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  object-fit: cover; transition: opacity 850ms ease, transform 850ms ease; transform-origin: top;}
section.story .overlay picture.hide img { opacity: 0;  transform: translateY(-1rem)}
section.story .overlay figure { display: flex; flex-direction: column; grid-gap: 1rem;}
section.story .overlay figure picture:first-of-type { height: 75%;}

section.story .overlay .main { color: var(--my-black);  text-align: left; margin: -3rem auto; padding-top: 1rem;  text-transform: uppercase; overflow: auto; mask-image: linear-gradient(transparent 0.5rem,  black 5rem, black 70%, transparent);  padding-bottom: 7rem;  scroll-behavior: smooth;}
section.story .overlay .main .speaker { margin: 3rem 0 1rem; }
section.story :is(.overlay picture, .overlay button, .main > *) { transform: translateY(1rem); opacity: 0; transition: transform 1500ms var(--my-ease-out) calc(var(--delay) + 1000ms),  opacity 1500ms var(--my-ease-out) calc(var(--delay) + 1000ms), rotate 250ms, scale 250ms;}

section.story .overlay .main .speaker { position: relative;  overflow: hidden;}
section.story .overlay .main .speaker strong { transition: padding 250ms var(--my-ease);}
section.story .overlay .main .speaker > span { width: .6em; height: 1em; justify-content: space-between; display: inline-flex; position: absolute; left: 0; top: .1em;  align-items: center;  opacity: 1 !important;}
section.story .overlay .main .speaker > span > span { width: .11em; height: .5rem; background: var(--my-black); display: inline-block; opacity: 1; border-radius: .3rem; transform: translateX(-1.5em); transition: transform 250ms;}
section.story .overlay .main .speaker > span > span:nth-of-type(1) { animation: audio 1.2s linear infinite alternate-reverse -.3s var(--play-state, paused);  }
section.story .overlay .main .speaker > span > span:nth-of-type(3) { animation: audio 1.4s linear infinite alternate -.5s var(--play-state, paused);  }
section.story .overlay .main .speaker > span > span:nth-of-type(2) { animation: audio 1.8s linear infinite alternate-reverse -.8s var(--play-state, paused);  }

@keyframes audio { 
    0% { height: .5rem}
    100% { height: .23rem; }
}

/* Overlay opened */
section.story.open .media img { opacity: 0;}
section.story.open .overlay { opacity: 1; pointer-events: all; transform: none;}
section.story.open .overlay .buttons button { pointer-events: all;  }
section.story.open .overlay::before { transform: translate(-50%,-50%) scale(1);}
section.story.open :is(.overlay picture, .overlay button, .main > *) { transform: none; opacity: 1;}


/* Audio states */
section.story .overlay[data-audio=true] button.audio { background: var(--my-lime); scale: 1.2; }
section.story .overlay[data-audio=true] button.audio svg { scale: 1.1;}
section.story .overlay[data-audio=false] button.audio svg path:first-of-type { transform: translateX(10%);}
section.story .overlay[data-audio=false] button.audio svg path:last-of-type { transform: scale(0);}

section.story .overlay[data-audio=true] .main .speaker strong { opacity: .25; transition: opacity 250ms, padding-left 250ms var(--my-ease); }
section.story .overlay[data-audio=true] .main .speaker.active strong { opacity: 1; }
section.story .overlay[data-audio=true] .main .speaker.speaking strong { padding-left: 1rem; }
section.story .overlay[data-audio=true] .main .speaker.speaking > span > span { transform: none; --play-state: running; }
section.story .overlay[data-audio=true] .main span { opacity: .25;}
section.story .overlay[data-audio=true] .main span.active { opacity: 1; transition: opacity 250ms; }


@media only screen and (max-width: 768px) {
    section.story .overlay { grid-gap: 2rem; }
}

@media only screen and (max-width: 650px) {
    section.story .overlay { grid-template-columns: 1fr; padding: 2rem; }
    section.story .overlay .main { max-width: 25rem;}
    section.story .overlay :is(picture,figure) { display: none; }
}


/* =========================================================== */
/* ========================= CONTACT ========================= */
/* =========================================================== */
section.contact:first-of-type {background: linear-gradient(to bottom, var(--my-lime) 0%, var(--my-lime) 8%, transparent 25%, transparent 100%); }
section.contact .container { padding: 3rem 2rem; color: var(--my-white); isolation: isolate; }
section.contact .h3 {  max-width: unset;  margin-bottom: .25em; }
section.contact p { text-transform: uppercase; max-width: 17em;}
section.contact picture { position: absolute; top: 0; left: 0; width: 80%; height: 100%; background: var(--my-black); border-radius: var(--border-radius); overflow: hidden;  z-index: -1; }
section.contact picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-black); opacity: .25;}
section.contact picture img { object-fit: cover; }

@media only screen and (max-width: 1024px) {
    section.contact picture { width: 100%;}
    section.contact form.custom { grid-template-columns: 1fr auto; grid-gap: .8em;}
}

@media only screen and (max-width: 850px) {
    section.contact form.custom { grid-template-columns: 1fr; }
    section.contact form.custom small { text-align: center; width: 100%; }
    section.contact form.custom .btn { margin-right: auto; max-width: calc(33% - .4em);}
}

@media only screen and (max-width: 700px) {
    section.contact form.custom { --form-columns: 2; }
    section.contact form.custom .btn { max-width: 50%;}
}
@media only screen and (max-width: 500px) {
    section.contact form.custom { --form-columns: 1; }
    section.contact form.custom fieldset { margin-top: 1rem;}
    section.contact form.custom .btn { max-width: 100%; width: 100%;  margin-bottom: .5rem;}
}

/* =========================================================== */
/* ========================== TEXT =========================== */
/* =========================================================== */
section.text .container { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; text-align: center; gap: 1rem; margin: 2rem auto;}
section.text .container .h3 { max-width: 18em;}
section.text .container .prose  {max-width: 27em;  }
section.text .container .btn { margin-top: 1rem;}
section.text:last-of-type .container { margin-bottom: var(--margin-y);}



/* =========================================================== */
/* ======================== BIG TITLE ======================== */
/* =========================================================== */
section.big .h1 { margin-bottom: 0; }

/* =========================================================== */
/* ======================= HOW WE WORK ======================= */
/* =========================================================== */
section.steps .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;  grid-gap: 1rem;  align-items: stretch; --min-cols: 4; }
section.steps .h2 { grid-column: -1/1; margin-bottom: 0;}
section.steps .block { --cols: min(var(--steps), var(--min-cols)); grid-column: span var(--cols);  display: flex; flex-direction: column; }
section.steps .block:not(:first-of-type) { margin-top: 2.5rem;  }
section.steps .block ul {  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-gap: 1rem;  flex-grow: 1; }
section.steps .block .md { max-width: 22em;  margin-bottom: 1rem; }
section.steps .step { display: flex; flex-direction: column; padding: 3.5rem 2rem 2.5rem; background: var(--own-color);  border-radius: var(--border-radius); text-transform: uppercase;  position: relative;  margin-top: 1.5rem; min-height: 14rem;}
section.steps .step.double { grid-column: span 2;}
section.steps .step .h6 { font-size: var(--font-size-body); font-family: var(--primary-font); font-weight: var(--font-bold);  display: flex; align-items: flex-start;  gap: .5em;  margin-bottom: 1rem; }
section.steps .step .h6 svg { width: 1em; height: 1em; }
section.steps .step > span {  background: var(--my-white); padding: 1.2rem;  min-width: 3.7rem; height: 3.7rem; background: var(--my-white); border-radius: 100vmin; display: grid; place-items: center; transition: opacity 250ms, transform 250ms;  pointer-events: all;  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size-h5); line-height: 0;}

section.steps .block.grey { --own-color: rgb(192, 186, 180, .8); }
section.steps .block.light-grey { --own-color: rgb(192, 186, 180, .3); }
section.steps .block.lime { --own-color: var(--my-lime) }

@media only screen and (max-width: 950px) {
    section.steps .container { grid-template-columns: 1fr 1fr; --min-cols: 2; }
}
@media only screen and (max-width: 500px) {
    section.steps .h2 { font-size: var(--font-size-h1);}
    section.steps .h4 { font-size: var(--font-size-h3);}
    section.steps .container { grid-template-columns: 1fr; --min-cols: 1; }
}

/* =========================================================== */
/* ===================== CALL TO ACTION ====================== */
/* =========================================================== */
section.cta .container > div { display: grid; display: grid; grid-template-columns: 1.4fr 1fr; grid-gap: 6.5rem;  align-items: flex-end;  }
section.cta picture::after { opacity: 1; background: linear-gradient(250deg, transparent 35%, rgba(0,0,0,0.6) 40%);}
section.cta .btn { margin-left: auto; max-width: 22rem; width: 100%; }
section.cta p { max-width: 23em; }
section.cta .container > div > a:only-child { margin-top: 2rem; }

@media only screen and (max-width: 600px) {
    section.cta .container > div { grid-template-columns: 1fr; grid-gap: 2rem;}
    section.cta .container > div .btn { margin-left: auto; }
}

/* =========================================================== */
/* =================== COURSE INTRODUCTION =================== */
/* =========================================================== */
section.course .container { display: flex; flex-direction: column; align-items: center; text-align: center;  isolation: isolate; justify-content: center;  text-transform: uppercase;}
section.course .h1 { max-width: unset; margin-bottom: var(--margin-y); }
section.course figure {  width: 25rem; height: 25rem;  position: absolute; z-index: -1;  top: -12.5rem }
section.course figure::before, section.course figure::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: radial-gradient(var(--background-color), var(--my-lime) 75%);  border-radius: 50%; filter: blur(1rem); animation: pulse 3s ease infinite alternate; }
section.course figure::before { --excess: -8rem;  left: var(--excess); top: var(--excess); width: calc(100% + var(--excess) * -2); height: calc(100% + var(--excess) * -2); background: radial-gradient(circle, var(--my-lime),  transparent 70%);  transition-delay: 1500ms;}
section.course .deets { white-space: nowrap; }
section.course .deets li:last-of-type svg { width: .7em; height: auto; }
section.course .deets li:first-of-type svg { height: .7em; width: auto; }
section.course .prose { max-width: 25em; margin: 2rem auto 0;}

@keyframes pulse { 
    0% { transform: scale(.8);}
    100% { transform: scale(1.1);}
}

@media only screen and (max-width: 768px) {
    section.course figure {  width: 55vw; height: 55vw;   top: 0; }
    section.course figure::before { --excess: -10vw; }   
}


/* =========================================================== */
/* ====================== IMAGE GALLERY ====================== */
/* =========================================================== */
section.gallery { display: grid;  grid-template-columns: 1fr 1.1fr 1.5fr 1.1fr 1fr; align-items: center; grid-gap: 1rem; }
section.gallery figure { display: flex; flex-direction: column; gap: 1rem; }   


/* =========================================================== */
/* ========================= CHAPTERS ======================== */
/* =========================================================== */
section.chapters .container { display: grid; grid-template-columns: auto 1fr; align-items: flex-end;   grid-gap: var(--gap);}
section.chapters .h3 { margin-bottom: 0; }
section.chapters .select { position: sticky; top: 4.25rem; margin-left: auto;    z-index: 2;   }
section.chapters .select select { appearance: none; background: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: var(--font-size-body);  cursor: pointer; }
section.chapters .select .btn { pointer-events: none;}

.select:hover .btn  > div:first-of-type > *:first-of-type { transform: translateY(-50%); }
.select:hover .btn  > div:first-of-type > *:last-of-type { transform: translateY(50%); }
.select:hover .btn  > div:last-of-type > *:first-of-type { clip-path: inset(0 0 0 0); }
.select:hover .btn  > div:last-of-type > *:last-of-type { clip-path: inset(0 0 0 0); }

.select .btn.has-arrow > div > span::after { background-image: url("/img/icons/chevron-down.svg"); background-size: .6em .6em;  margin-left: 2rem; }


ul.chapter { list-style: none; padding: 0; width: 100%;  grid-column: -1/1; margin-top: 3rem;}
ul.chapter[aria-hidden=true] { display: none; }
ul.chapter > li {  margin-bottom: 1.25rem;  position: relative; opacity: 0; transform: translateY(1rem); }
ul.chapter[data-active=true] > li { animation: fade-in 500ms var(--my-ease) calc(var(--i) * 100ms) forwards; }
ul.chapter > li::before {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border-radius: var(--border-radius) var(--border-radius) 0 0; border: 1px solid var(--my-black); border-bottom: 0;content: "";   mask-image: linear-gradient(to bottom,  black, transparent);  pointer-events: none;}
ul.chapter > li .h6 { margin-bottom: 0; font-family: var(--primary-font);  color: rgba(137, 137, 137, .8); font-weight: var(--font-regular); }
ul.chapter > li button { padding: 1.5em 1.5em .5em; display: flex; align-items: center; cursor: pointer;  transition: color 500ms ease;  font-weight: inherit;  font-family: inherit; font-size: var(--font-size-body);  width: 100%;  z-index: 3;  position: relative; }
ul.chapter > li button::before { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(var(--font-size-h5) * .8); opacity: 0; content: "";  transform: translateY(100%);}
ul.chapter > li button span { width: 1.3em; height:1.3em; margin-left: auto;  border-radius: .25rem;  display: flex; align-items: center; justify-content: center;   color: var(--my-black);}
ul.chapter > li button span::before,ul.chapter > li button span::after { content: ""; position: absolute;  width:.8em; height: 2px; border-radius: 1rem; background: currentColor; transform: rotate(var(--r, 0deg));  transition: transform 500ms ease, color 500ms ease;}
ul.chapter > li button span::before { --r: -90deg;}
ul.chapter > li a { position: relative; }
ul.chapter > li a picture { height: 100%; }
ul.chapter > li a picture img { object-fit: cover;}
ul.chapter > li .circle-arrow { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }

ul.chapter > li .h5 { font-size: var(--font-size-h6);  font-family: var(--header-bold-font);}
ul.chapter > li > div { transition: padding 500ms ease, max-height 500ms ease; overflow: hidden;  width: calc(100% - 3rem); padding-left: 1.5em;}
ul.chapter > li > div > div { transform: translateY(-0rem); transition: transform 500ms ease;  padding-bottom: var(--font-size-h6);}
ul.chapter > li > div > div > *:last-child { margin-bottom: 0; }
ul.chapter > li > div[aria-hidden=true] { max-height: calc(var(--font-size-h5) * .75); }
ul.chapter > li .inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-gap: 0 4rem; }
ul.chapter > li .inner img { border-radius: var(--border-radius);}
ul.chapter > li .inner :is(picture, .prose) { opacity: 0; transform: translateY(1rem); transition: transform 500ms var(--my-ease) 0s, opacity 500ms var(--my-ease) 40ms;}
ul.chapter > li .inner .prose { transition-delay: 120ms;}

/* Opened */
ul.chapter > li > div[aria-hidden=false] {  max-height: var(--height, unset); }
ul.chapter > li > div[aria-hidden=false]  > div { transform: none; }
ul.chapter > li > div[aria-hidden=false] .inner :is(picture, .prose) {  opacity: 1; transform: none;}
ul.chapter > li button[aria-expanded=true]::before { display: none; }
ul.chapter > li button[aria-expanded=true] span::after { --r: 45deg; }
ul.chapter > li button[aria-expanded=true] span::before { --r: -45deg; }

@keyframes fade-in { 
    0% { transform: translateY(1rem); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}

@media only screen and (max-width: 950px) {
    ul.chapter > li > div[aria-hidden="true"] { max-height: calc(var(--font-size-h5) * .9);}
}

@media only screen and (max-width: 900px) {
    ul.chapter > li .inner { grid-template-columns: 1fr 1fr;  grid-gap: 1rem 4rem;}
    ul.chapter > li .h5 { grid-column: -1/1;}
}

@media only screen and (max-width: 600px) {
    section.chapters .container { grid-gap: 1rem; padding-bottom: 1.5rem; }
    section.chapters .select { grid-column: -1/1; top: calc(100vh - 4rem); margin-bottom: -5.25rem;  left: 0; right: 0; margin-inline: auto;}
    
    ul.chapter { margin-top: 1rem;  }
    ul.chapter > li .inner { grid-template-columns: 1fr;  grid-gap: 1rem;}
    ul.chapter > li a { order: 2; max-width: 15rem;}

}


/* =========================================================== */
/* ===================== CONTACT DETAILS ===================== */
/* =========================================================== */
section.contact + section.details .container { margin-top: 0;}
section.details .container .grid {display: grid; grid-template-columns: 1fr 1fr auto;  grid-gap: 1rem 3rem; text-transform:uppercase; max-width: 80%;}
section.details .deets { flex-direction: column; align-items: flex-start;  gap: 1rem; margin-bottom: 1.5rem;} 
section.details .deets li a { display: flex; align-items: center; gap: .6rem;  position: relative; }
section.details .deets li a::before { content: ""; position: absolute; top: -.25rem; left: -.5rem; width: 100%; height: 100%;  background: var(--my-lime); padding: .25rem .75rem; box-sizing: content-box; z-index: -2; transform: scaleX(0); transition: transform 333ms var(--my-ease); transform-origin: left;}
section.details .deets li a:hover::before { transform: none; }
section.details .deets li svg{ height: 0.85em; width: auto; }

@media only screen and (max-width: 1024px) {
    section.details .container .grid { max-width: 100%; }
}

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


/* =========================================================== */
/* ====================== EVENT LIBRARY ====================== */
/* =========================================================== */
section.events { text-transform: uppercase;}
section.events .container > ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; align-items: stretch;}

li.event { display: grid; grid-template-columns: 1fr auto; background: rgb(192, 186, 180, .3);  border-radius: var(--border-radius); overflow: hidden;}
li.event .body { font-family: var(--header-bold-font); margin-bottom: 1.5rem; }
li.event:first-of-type { background: var(--my-lime);}
li.event article:only-child { grid-column: -1/1; }
li.event article {  padding: 2.5rem 2rem; }
li.event picture { flex-shrink: 0;  max-width: 8rem; }
li.event img { object-fit: cover;}
li.event .deets { display: flex; flex-direction: column; align-items: flex-start; margin: 1rem auto 1.5rem; }
li.event .deets li svg {height: .85em; width: auto;  }
li.event .btn { margin-top: 2.25rem;  }
li.event .btn div:last-of-type span  {background: var(--my-white);}

button.wtrvl-checkout_button > * { pointer-events: none;}

@media only screen and (max-width: 950px) {
    section.events .container { max-width: 30rem;  }
    section.events .container > ul { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 768px) {
    li.event { grid-template-columns: 1fr;}
    li.event article { padding:  2rem 1.5rem}
    li.event picture { order: -1; width: 100%; max-width: 100%;}
}


/* =========================================================== */
/* ======================= PAST EVENTS ======================= */
/* =========================================================== */
section.past-events { background: linear-gradient(to top, var(--my-lime) -10%, transparent 25%, transparent 100%);}
section.past-events .overflower-parent {  margin-block: 3rem var(--margin-y); }

/* =========================================================== */
/* ========================= REVIEWS ========================= */
/* =========================================================== */
section.reviews .h3 { margin-bottom: 0;}
section.reviews .overflower-parent .ctrl-btns { opacity: 0; transition: opacity 333ms var(--my-ease);}
section.reviews .overflower-parent:hover .ctrl-btns { opacity: 1;}

li.review { position: relative;  width: 25rem;  flex-shrink: 0; scroll-snap-align: center;display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr 2fr; background: rgb(192, 186, 180, .3);  padding: 2rem;  align-items: flex-start;  border-radius: var(--border-radius); grid-gap: 2rem; transition: background 500ms var(--my-ease); text-transform: uppercase;}
li.review[data-active=true] { background: var(--my-lime);}
li.review img { border-radius: calc(var(--border-radius) * .4);}
li.review .prose { grid-column: -1/1; max-width: 100%;}
li.review .author { display: flex; flex-direction: column; align-items: flex-start;  padding-right: 2rem;  }
li.review .author:first-child { grid-column: -1/1;}
li.review .author strong { font-weight: var(--font-bold); }
li.review .author span { font-size: var(--font-size-tiny);  opacity: .4; margin-top: .25rem; }

section.reviews .overflower[data-right=true] li.review,
section.reviews .overflower[data-left=true] li.review { background: rgba(192,186,180,.3)}
section.reviews .overflower[data-left=true] li.review:first-of-type,
section.reviews .overflower[data-right=true] li.review:last-of-type { background: var(--my-lime);}

@media only screen and (max-width: 768px) {
    li.review { width: clamp(19rem, 73vw, 25rem);}
}

@media only screen and (max-width: 550px) {
    li.review { grid-gap: 2rem; padding: 1.5rem; }
    li.review picture { max-width: 7rem; }
    li.review .author { align-self: flex-end;}
}

/* =========================================================== */
/* ===================== CONNECT OVERLAY ===================== */
/* =========================================================== */
section.connect-overlay { position: fixed; top: 1rem; right: 1rem; width: calc(100% - 2rem); height: calc(100vh - 2rem); height: calc(100dvh - 2rem); max-width: 30rem;  background: var(--background-color); border-radius: var(--border-radius); z-index: 150; overflow: auto; transition: opacity 500ms var(--my-ease), transform 500ms var(--my-ease); transform-origin: center right; }
section.connect-overlay[aria-hidden="true"] { opacity: 0; transform: scale(0.65); pointer-events: none;}
section.connect-overlay[aria-hidden="false"] { opacity: 1; transform: scale(1);}

footer > .underlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 500ms ease;}
section.connect-overlay[aria-hidden="false"] ~ .underlay { opacity: 1; pointer-events: all;}

section.connect-overlay .box { display: flex; min-height: 100%; }
section.connect-overlay .main { width: 100%; max-width: 50rem; margin: 0 auto; display: flex; flex-direction: column;}
section.connect-overlay button.close-btn { position: absolute; top: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid currentColor; background: none; cursor: pointer; transition: transform 300ms ease;}
section.connect-overlay button.close-btn:hover { transform: rotate(90deg);}
section.connect-overlay button.close-btn::before, section.connect-overlay button.close-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 2px; background: currentColor;}
section.connect-overlay button.close-btn::before { transform: translate(-50%, -50%) rotate(45deg);}
section.connect-overlay button.close-btn::after { transform: translate(-50%, -50%) rotate(-45deg);}

section.connect-overlay h2 { margin-bottom: 2rem; padding: 1.5rem 2rem 0rem; }
section.connect-overlay form { flex: 1; position: relative; min-height: 21rem;}
section.connect-overlay .fieldset-container { position: relative; width: 100%; height: 100%;  overflow: hidden; padding: 2rem;  transition: min-height 333ms var(--my-ease);}
section.connect-overlay fieldset { border: none; padding: 0; margin: 0; position: absolute; width: calc(100% - 4rem); left: 2rem; top: 0;  transition: clip-path 500ms ease, transform 500ms ease; transform: translateX(20%);  clip-path: inset(0 0 0 100%); }
section.connect-overlay fieldset.been { clip-path: inset(0 100% 0 0); }
section.connect-overlay fieldset.active {  transform: translateX(0); clip-path: inset(0 -10% -10% -10%); }
section.connect-overlay .question-step h3 { margin-bottom: 1rem; font-family: var(--primary-font);  text-transform: none; font-size: var(--font-size-h6);}

section.connect-overlay .answers { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem;}
section.connect-overlay .answers > li { display: flex; flex-direction: column;}
section.connect-overlay .answers input[type="radio"] { display: none;}
section.connect-overlay .answers label { padding: var(--btn-padding); border: 1px solid var(--main-color); border-radius: 2rem; cursor: pointer; transition: background 300ms var(--my-ease), color 300ms var(--my-ease); user-select: none; display: flex;align-items: flex-start;  gap: 1em; align-items: center;  border-radius: var(--btn-border-radius);}
section.connect-overlay .answers label svg {  margin-left: auto; position: relative;   color: var(--background-color); width: 1.1em; flex-shrink: 0;}
section.connect-overlay .answers input[type="radio"]:checked + label { background: var(--main-color); color: var(--background-color);}

section.connect-overlay .result-step .description { margin-bottom: 1.5rem;}
section.connect-overlay .result-step .btn { margin-bottom: 1rem;}
section.connect-overlay .result-step .btn.send { margin: 1rem 0 0 auto; display: block; min-width: 9rem;}
section.connect-overlay .form-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.1);}
section.connect-overlay .form-section h3 { margin-bottom: 1rem;}
section.connect-overlay .form-inputs { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
section.connect-overlay .form-inputs .normal { position: relative; }

section.connect-overlay .bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; flex-shrink: 0;}
section.connect-overlay .bottom::before { opacity: .5;}
section.connect-overlay .bottom button { transition: opacity 300ms var(--my-ease), transform 300ms var(--my-ease);  min-width: 9rem; }
section.connect-overlay .bottom button span::after { transform: rotate(0deg); margin: 0 0 0 auto; }
section.connect-overlay .bottom button.back span::after { transform: rotate(0deg) scaleX(-1); margin: 0 auto 0 0; order: -1;   }
section.connect-overlay .bottom button.hidden {  opacity: 0; pointer-events: none;}
section.connect-overlay button[disabled] { opacity: 0.5; pointer-events: none;}

@media only screen and (max-width: 768px) {
    section.connect-overlay h2{  padding: 1.5rem 1rem 0; }
    section.connect-overlay .fieldset-container { padding: 2rem 1rem;}
    section.connect-overlay .fieldset-container fieldset { width: calc(100% - 2rem); left: 1rem; }
    section.connect-overlay .bottom { padding: 1.5rem 1rem; }
}

/* =========================================================== */
/* ========================== EVENT ========================== */
/* =========================================================== */
section.event .container { display: grid; grid-template-columns: 1fr 1.75fr; grid-gap: var(--gap);}
section.event .prose { order: 2; max-width: 40rem; margin: 0 auto; grid-row: span 4; }
section.event .container > .event-details { margin-top: calc(var(--gap) * -2);}
section.event .container > .prose .event-details { margin-top: 2rem;}

.event-details { padding: 1rem; border-radius: var(--border-radius); border: 1px solid var(--my-black); max-width: 30rem;  order: 2;} 
.event-details .h6 { font-weight: var(--font-bold); font-family: var(--header-bold-font);}
.event-details .btn.btn { margin-top: 0;}
.event-details p:last-of-type { margin-bottom: 1.4em;  }
.event-details ul { margin: 0 0 1.4em; list-style: initial; padding-left: 1em; }
.event-details.sticky { position: sticky;  top: 6rem;  transition: transform 500ms ease, clip-path 500ms ease; clip-path: inset(0 0 100% 0); transform: translateY(2rem); }
.event-details.sticky .h4 { max-width: 11em; padding-bottom: 1rem; }

section.event .included { width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; max-width: unset; padding: 1.5rem; }

section.event:has(.event-details[data-active=false]) .event-details.sticky { transform: none; clip-path: inset(0 0 0 0) }

@media only screen and (min-width: 501px) {
    section.event .prose picture { display: none;}
}

@media only screen and (max-width: 768px) {
    section.event .container { grid-template-columns: 1fr 3fr;}
    .event-details.sticky { position: fixed;  top: unset;  bottom: 1rem; margin: 0 auto; left: 0; right: 0;  padding: 0;  border: none; max-width: max-content; }
    .event-details.sticky > *:not(.btn) { display: none; }
}

@media only screen and (max-width: 500px) {
    section.event .container { grid-template-columns: 1fr; }
    section.event .container > figure  {display: none; }
    
}

/* --------------- FORM --------------- */
form.custom { 
    /* Layout */
    --form-columns: 3;
    --form-gap: .8em;  

    /* Inputs */
    --form-main-color: var(--my-black);
    --form-input-background-color: var(--my-white);
    --form-padding-x: 1em;  
    --form-padding-y: 1em;  
    --form-padding: var(--form-padding-y) var(--form-padding-x);  

    /* Borders */
    --form-border-color: transparent; 
    --form-border-width: 1px;  
    --form-border-radius: 0.5rem; 
    
    /* Labels */
    --form-label-color: var(--my-black);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--scheme-background); 
    --form-label-asterisk-color: var(--main-color);
    --form-label-transform-distance: 80%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--my-lime);
    --form-color-error: maroon;

    /* Transition */
    --form-transition: 250ms ease; 
}
/* LAYOUT */
form.custom:not(.connect-form) { position: relative;  display: grid; grid-template-columns: 1.4fr 1fr; align-items: flex-end;  width: 100%; grid-gap: 6.5rem;}
form.custom:not(.connect-form) fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr);  grid-gap: var(--form-gap); margin-top: 3rem; }
form.custom fieldset > div { position: relative; }

/* 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: var(--form-border-width) solid var(--form-border-color);  background: var(--form-input-background-color); border-radius: var(--form-border-radius);    text-align: center;}
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-main-color); }
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: var(--form-border-width) solid var(--form-border-color);  transition: border var(--form-transition), padding var(--form-transition) }
form.custom .normal textarea:focus-visible { border: var(--form-border-width) solid var(--form-color-focus);  }

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

/* LABEL */
form.custom .normal label { position: absolute;  top: 50%;  left: 50%; opacity: .85; pointer-events: none; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color);  border-radius: var(--form-label-border-radius); text-transform: uppercase; transform: translate(-50%, -55%);}
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(-45%, -5%) scale(0.7); top: 0; opacity: 1; padding-inline: .5em;  background: var(--form-label-background-color); max-width: unset;  background: var(--my-white);}
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))):not([required]) + label, form.custom .select[data-active=true] select:not([required]) + label { padding: 0 .5em;}

/* 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; }

/* 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);  opacity: 1;}

/* 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: 50%; pointer-events: none;  transform: translateX(-50%); transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color);  opacity: 0;  text-transform: uppercase;}
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; display: flex; background: var(--my-white);  border-radius: var(--form-border-radius);  padding: 1em;}
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color);}
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1.5em;   }
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.3em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.1em; width: 1em; height: 1em; border: 1px solid var(--main-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::before {  background: var(--form-color-focus);}
form.custom .field ul input:checked ~ label::after { transform: none; }

/* CAPCHA NOTICES */
form.custom small { font-size: .6rem; opacity: .7; transform-origin: top left; margin: calc(var(--em) * -1) 0 .5rem; margin-left: var(--halfBorderRadius); position: absolute; bottom: -.5rem; transform: translateY(100%); }
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

form.custom:not(.connect-form) .btn { width: 100%;  margin-left: auto; max-width: 22rem;}


/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.3em 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(--main-color);}
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}
.prose .btn { margin-top: 2rem; }


/* --------------- LIGHTBOX --------------- */
#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
#lightbox .img {position: relative; top: 50%;left: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);max-width: 100%;max-height: 100%;}
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: var(--main-color); text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;  }
#lightbox span {display: none;}
#lightbox .videoWrapperContainer { position: relative;  height: 100%;  max-width: var(--max-width); max-height: 100%; width: var(--width); margin: 0 auto; }
#lightbox .videoWrapperContainer .videoWrapper {   position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center;} 
#lightbox .videoWrapper :is(iframe,video) {position: absolute; max-height: calc(100% - 2rem); width: 100%;height: auto; border: 0;display: block; object-fit: contain; height: 100%;  }   
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: var(--main-color); font-size: 60px;}
#lightbox.gallery #prev, #lightbox.gallery #next {display: none;}
#lightbox #prev {left: 0;}
#lightbox #next {right: 0;}
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: var(--my-white); width: 23px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
#lightbox #close:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
#lightbox, #lightbox * { -webkit-user-select: none;  -moz-user-select: none;    -ms-user-select: none;      user-select: none;}

@media screen and (min-width: 1200px) {
    #lightbox .img { max-width: 1200px; }
}
@media screen and (min-height: 1200px) {
    #lightbox .img { max-height: 1200px;}
}


/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center  }


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


/* --------------- MEDIA QUERIES --------------- */
/* MIN */
@media only screen and (min-width: 500px) {
    header[data-light=false] nav#desktop .buttons .btn > div:first-of-type span { background: var(--my-white); }
}

/* MAX */
@media only screen and (max-width: 950px) {
    :root { 
        --gutter-top: 1rem; 
        --gutter-side: 1rem;
        
        --margin-y: 4rem; 

        --font-size-huge: 3rem;       /* 82px */
        --font-size-h1: 2.4rem;        /* 72px */
        --font-size-h2: 2rem;         /* 56px */
        --font-size-h3: 1.6rem;         /* 46px */
        --font-size-h4: 1.4rem;        /* 40px */
        --font-size-h5: 1.2rem;        /* 38px */
        --font-size-h6: 1.1rem;         /* 26px */
        --font-size-body: 1rem;      /* 20px */ 
        --font-size-little: .9rem;    /* 18px */ 
        --font-size-tiny: .81rem;       /* 16px */ 
    }
    .mobile { display: block; }
    nav#desktop { grid-template-columns: auto auto;   --menu-button-width: 3.545rem}
    nav#desktop > ul { display: none;  }

    nav#mobile .bottom { flex-direction: column; }
    nav#mobile .inner { max-width: 100%; }
}

@media only screen and (max-width: 500px) {
    nav#desktop button.btn { position: fixed; bottom: 1rem; left: 0; right: 0; margin: 0 auto; width: max-content; }
}

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

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


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