/* ========================================================================== *\
   TABLE OF CONTENTS
\* ==========================================================================

	0. RESET
	1. TOKENS
		1.1 LAYOUT
		1.2 RADIUS
		1.3 SIZE
		1.4 SPACING
		1.5 ICON SIZE
        1.6 COLOURS
        1.7 FONTS
	2. GENERAL TAGS
	3. STRUCTURE
	4. GENERAL CLASSES
	5. FORM STYLES
	6. LAYOUT
		6.1 COLUMNS
		6.2 GRID BEHAVIOUR
   		6.3 FLEX CONTAINER
   		6.4 GRID CONTAINER
   		6.5 PADDING
   		6.6 BORDER
        6.7 BACKGROUNDS
*/

/* ========================================================================== *\
   0. RESET
\* ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* Make HTML 5 elements display block-level for consistent styling */
main, article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}

/* ========================================================================== *\
   1. TOKENS
\* ========================================================================== */

/* ====================================== *\
   1.1 LAYOUT
\* ====================================== */

/* Desktop */
:root {
    --layout-base-inner-container: 114rem;
    --layout-base-inner-container-padding: 0;
    --layout-base-gutter: 3.2rem;

    --layout-gap-xxxs: var(--spacing-025);
    --layout-gap-xxs: var(--spacing-05);
    --layout-gap-xs: var(--spacing-1);
    --layout-gap-sm: var(--spacing-2);
    --layout-gap-md: var(--spacing-3);
    --layout-gap-lg: var(--spacing-4);
    --layout-gap-xl: var(--spacing-5);
    --layout-gap-2xl: var(--spacing-6);
    --layout-gap-3xl: var(--spacing-10);
    --layout-gap-4xl: var(--spacing-13);

    --layout-margin-xxs: var(--spacing-05);
    --layout-margin-xs: var(--spacing-1);
    --layout-margin-sm: var(--spacing-2);
    --layout-margin-md: var(--spacing-3);
    --layout-margin-lg: var(--spacing-4);
    --layout-margin-xl: var(--spacing-5);
    --layout-margin-2xl: var(--spacing-6);
    --layout-margin-3xl: var(--spacing-10);
    --layout-margin-4xl: var(--spacing-13);
    --layout-margin-5xl: var(--spacing-14);

    --layout-padding-xxs: var(--spacing-05);
    --layout-padding-xs: var(--spacing-1);
    --layout-padding-sm: var(--spacing-2);
    --layout-padding-md: var(--spacing-3);
    --layout-padding-lg: var(--spacing-4);
    --layout-padding-xl: var(--spacing-5);
    --layout-padding-2xl: var(--spacing-6);
    --layout-padding-3xl: var(--spacing-10);
    --layout-padding-4xl: var(--spacing-13);
    --layout-padding-5xl: var(--spacing-14);
}

/* Tablet Landscape: 801px to 1140px */
@media screen and (min-width: 801px) and (max-width: 1140px) {

    :root {
        --layout-base-inner-container: 100%;
        --layout-base-inner-container-padding: 4.8rem;
        --layout-base-gutter: 3.2rem;

        --layout-gap-xxxs: var(--spacing-025);
        --layout-gap-xxs: var(--spacing-05);
        --layout-gap-xs: var(--spacing-1);
        --layout-gap-sm: var(--spacing-2);
        --layout-gap-md: var(--spacing-3);
        --layout-gap-lg: var(--spacing-4);
        --layout-gap-xl: var(--spacing-5);
        --layout-gap-2xl: var(--spacing-6);
        --layout-gap-3xl: var(--spacing-8);
        --layout-gap-4xl: var(--spacing-12);

        --layout-margin-xxs: var(--spacing-05);
        --layout-margin-xs: var(--spacing-1);
        --layout-margin-sm: var(--spacing-2);
        --layout-margin-md: var(--spacing-3);
        --layout-margin-lg: var(--spacing-4);
        --layout-margin-xl: var(--spacing-5);
        --layout-margin-2xl: var(--spacing-6);
        --layout-margin-3xl: var(--spacing-10);
        --layout-margin-4xl: var(--spacing-13);
        --layout-margin-5xl: var(--spacing-15);

        --layout-padding-xxs: var(--spacing-05);
        --layout-padding-xs: var(--spacing-1);
        --layout-padding-sm: var(--spacing-2);
        --layout-padding-md: var(--spacing-3);
        --layout-padding-lg: var(--spacing-4);
        --layout-padding-xl: var(--spacing-5);
        --layout-padding-2xl: var(--spacing-6);
        --layout-padding-3xl: var(--spacing-10);
        --layout-padding-4xl: var(--spacing-13);
        --layout-padding-5xl: var(--spacing-15);
    }

}

/* Tablet Portrait: 601px to 800px */
@media screen and (min-width: 601px) and (max-width: 800px) {

    :root {
        --layout-base-inner-container: 100%;
        --layout-base-inner-container-padding: 2.4rem;
        --layout-base-gutter: 2.4rem;

        --layout-gap-xxxs: var(--spacing-025);
        --layout-gap-xxs: var(--spacing-05);
        --layout-gap-xs: var(--spacing-1);
        --layout-gap-sm: var(--spacing-2);
        --layout-gap-md: var(--spacing-3);
        --layout-gap-lg: var(--spacing-4);
        --layout-gap-xl: var(--spacing-5);
        --layout-gap-2xl: var(--spacing-6);
        --layout-gap-3xl: var(--spacing-8);
        --layout-gap-4xl: var(--spacing-12);

        --layout-margin-xxs: var(--spacing-05);
        --layout-margin-xs: var(--spacing-1);
        --layout-margin-sm: var(--spacing-2);
        --layout-margin-md: var(--spacing-3);
        --layout-margin-lg: var(--spacing-4);
        --layout-margin-xl: var(--spacing-5);
        --layout-margin-2xl: var(--spacing-6);
        --layout-margin-3xl: var(--spacing-10);
        --layout-margin-4xl: var(--spacing-13);
        --layout-margin-5xl: var(--spacing-15);

        --layout-padding-xxs: var(--spacing-05);
        --layout-padding-xs: var(--spacing-1);
        --layout-padding-sm: var(--spacing-2);
        --layout-padding-md: var(--spacing-3);
        --layout-padding-lg: var(--spacing-4);
        --layout-padding-xl: var(--spacing-5);
        --layout-padding-2xl: var(--spacing-6);
        --layout-padding-3xl: var(--spacing-10);
        --layout-padding-4xl: var(--spacing-13);
        --layout-padding-5xl: var(--spacing-13);
    }

}

/* Mobile: max-width 600px */
@media screen and (max-width: 600px) {
    :root {
        --layout-base-inner-container: 100%;
        --layout-base-inner-container-padding: 1.6rem;
        --layout-base-gutter: 0.8rem;

        --layout-gap-xxxs: var(--spacing-025);
        --layout-gap-xxs: var(--spacing-05);
        --layout-gap-xs: var(--spacing-1);
        --layout-gap-sm: var(--spacing-2);
        --layout-gap-md: var(--spacing-3);
        --layout-gap-lg: var(--spacing-3);
        --layout-gap-xl: var(--spacing-3);
        --layout-gap-2xl: var(--spacing-4);
        --layout-gap-3xl: var(--spacing-6);
        --layout-gap-4xl: var(--spacing-10);

        --layout-margin-xxs: var(--spacing-05);
        --layout-margin-xs: var(--spacing-1);
        --layout-margin-sm: var(--spacing-2);
        --layout-margin-md: var(--spacing-3);
        --layout-margin-lg: var(--spacing-4);
        --layout-margin-xl: var(--spacing-5);
        --layout-margin-2xl: var(--spacing-6);
        --layout-margin-3xl: var(--spacing-10);
        --layout-margin-4xl: var(--spacing-13);
        --layout-margin-5xl: var(--spacing-15);

        --layout-padding-xxs: var(--spacing-05);
        --layout-padding-xs: var(--spacing-1);
        --layout-padding-sm: var(--spacing-2);
        --layout-padding-md: var(--spacing-3);
        --layout-padding-lg: var(--spacing-4);
        --layout-padding-xl: var(--spacing-5);
        --layout-padding-2xl: var(--spacing-6);
        --layout-padding-3xl: var(--spacing-10);
        --layout-padding-4xl: var(--spacing-13);
    }
}

/* ====================================== *\
   1.2 RADIUS
\* ====================================== */

:root {
    --radius-none: 0rem;
    --radius-xs: 0.2rem;
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.6rem;
    --radius-xl: 3.2rem;
    --radius-2xl: 6.4rem;
    --radius-3xl: 36rem;
}

/* ====================================== *\
   1.3 SIZE
\* ====================================== */

:root {
    --size-025: 0.2rem;
    --size-05: 0.4rem;
    --size-1: 0.8rem;
    --size-2: 1.6rem;
    --size-3: 2.4rem;
    --size-4: 3.2rem;
    --size-5: 4rem;
    --size-6: 4.8rem;
    --size-7: 5.6rem;
    --size-8: 6.4rem;
    --size-9: 7.2rem;
    --size-10: 8rem;
    --size-11: 8.8rem;
    --size-12: 9.6rem;
    --size-13: 10.4rem;
    --size-14: 11.2rem;
    --size-15: 15rem;
}

/* ====================================== *\
   1.4 SPACING
\* ====================================== */

:root {
    --spacing-025: 0.2rem;
    --spacing-05: 0.4rem;
    --spacing-1: 0.8rem;
    --spacing-2: 1.6rem;
    --spacing-3: 2.4rem;
    --spacing-4: 3.2rem;
    --spacing-5: 4rem;
    --spacing-6: 4.8rem;
    --spacing-7: 5.6rem;
    --spacing-8: 6.4rem;
    --spacing-9: 7.2rem;
    --spacing-10: 8rem;
    --spacing-11: 8.8rem;
    --spacing-12: 9.6rem;
    --spacing-13: 10.4rem;
    --spacing-14: 16rem;
    --spacing-15: 20rem;
}

/* ====================================== *\
   1.5 ICON SIZE
\* ====================================== */

:root {
    --icon-size-xs: 1.6rem;
    --icon-size-sm: 1.8rem;
    --icon-size-md: 2.4rem;
    --icon-size-lg: 3rem;
    --icon-size-xl: 3.8rem;
    --icon-size-2xl: 4.2rem;
    --icon-size-3xl: 5.2rem;
}

/* ====================================== *\
   1.6 COLOURS
\* ====================================== */

:root {
    --base-white: #ffffff;

    --base-forest-100: #dde6de;
    --base-forest-200: #9fb6a3;
    --base-forest-300: #4d6851;
    --base-forest-400: #314932;
    --base-forest-500: #1e2e20;
    --base-forest-600: #141e16;
    --base-forest-700: #0c140e;

    --base-ochre-100: #f4d9bd;
    --base-ochre-200: #e9b98a;
    --base-ochre-300: #d98a4e;
    --base-ochre-400: #c56128;
    --base-ochre-500: #9e471e;
    --base-ochre-600: #783619;
    --base-ochre-700: #4a291a;

    --base-sky-100: #e3eef3;
    --base-sky-200: #b5cfdd;
    --base-sky-300: #7391a5;
    --base-sky-400: #4d6f82;
    --base-sky-500: #2f4b59;
    --base-sky-600: #1f323c;
    --base-sky-700: #152228;

    --base-sand-100: #fbf3e3;
    --base-sand-200: #f6e8cc;
    --base-sand-300: #f3e1bc;
    --base-sand-400: #f1ddb7;
    --base-sand-500: #cdb78d;
    --base-sand-600: #a07d58;
    --base-sand-700: #6e5338;

    --base-lake-100: #dce8e5;
    --base-lake-200: #a5c0ba;
    --base-lake-300: #567a73;
    --base-lake-400: #32544d;
    --base-lake-500: #223a36;
    --base-lake-600: #162724;
    --base-lake-700: #0e1917;

    --base-dirt-100: #ede4df;
    --base-dirt-200: #cbb8af;
    --base-dirt-300: #8a6a5b;
    --base-dirt-400: #4f3a31;
    --base-dirt-500: #31231e;
    --base-dirt-600: #1d1613;
    --base-dirt-700: #0c0908;

    --role-text-primary: var(--base-dirt-600);
    --role-text-invert: var(--base-sand-200);
    --role-text-interactive: var(--base-sky-500);
    --role-text-highlight-dark: var(--base-ochre-300);
    --role-text-highlight-light: var(--base-sky-500);

    --role-background-light-primary: var(--base-sand-200);
    --role-background-light-secondary: var(--base-sky-200);
    --role-background-dark-primary: var(--base-forest-600);
    --role-background-dark-secondary: var(--base-sand-700);
    --role-background-dark-tertiary: var(--base-dirt-500);

    --role-icon-primary: var(--base-dirt-600);
    --role-icon-invert: var(--base-sand-200);
    --role-icon-interactive: var(--base-sky-500);
    --role-icon-highlight-light: var(--base-ochre-300);
    --role-icon-highlight-dark: var(--base-sky-500);
}

/* ====================================== *\
   1.7 FONTS & EFFECTS
\* ====================================== */

:root {
    --body--xl: 2.4rem;
    --body--lg: 2.0rem;
    --body--md: 1.6rem;
    --body--sm: 1.4rem;
    --body--xs: 1.2rem;
    --heading--xl: 5.6rem;
    --heading--lg: 4.0rem;
    --heading--md: 3.0rem;
    --heading--sm: 2.4rem;
    --label--md: 1.6rem;

    --elevation-2:  0px 4px 16px rgba(0, 0, 0, 0.3);
}


/* ========================================================================== *\
   2. GENERAL TAGS
\* ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* == 10px rem == */
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-size: var(--body--md);
	line-height: 125%;
    font-weight: 400;
    color: var(--role-text-primary); 
    font-family: "Source Sans 3", sans-serif;
}

p {

}

.heading {
    display: block;
    font-family: "Chewy", system-ui;    
}

.heading-md {
    font-size: var(--heading--md);
    line-height: 125%;
    font-weight: 300;
}

.heading-lg {
    font-size: var(--heading--lg);
    line-height: 125%;
    font-weight: 300;
}

.heading-xl {
    font-size: var(--heading--xl);
    line-height: 125%;
    font-weight: 300;
}

.label-md {
    font-size: var(--label--md);
    line-height: auto;
    font-weight: 700;
}

.body-xs {
    font-size: var(--body--xs);
    line-height:150%;
    font-weight: 400;
}

.body-sm {
    font-size: var(--body--sm);
    line-height:150%;
    font-weight: 400;
}

.body-md {
    font-size: var(--body--md);
    line-height:125%;
    font-weight: 400;
}

.body-lg {
    font-size: var(--body--lg);
    line-height:125%;
    font-weight: 400;
}

.body-xl {
    font-size: var(--body--xl);
    line-height: 150%;
    font-weight: 400;
}

a {
    color: var(--role-text-interactive);
    text-decoration: underline;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}

a:hover {
	outline: 0;
    text-decoration-thickness: 0.2rem;
    color: var(--role-text-interactive);
}

:focus {
  outline: 2px solid var(--base-ochre-400);
  outline-offset: 2px;
}

hr {

}

blockquote {

}

::selection {
	background: var(--base-ochre-500);
	color: var(--base-white);
}

::-moz-selection {
	background: var(--base-ochre-500);
	color: var(--base-white);
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ========================================================================== *\
   3. STRUCTURE
\* ========================================================================== */

#wrapper,
.wrapper {
	overflow-x: hidden;
}

#wrapper:focus,
.wrapper:focus {
	outline: none;
}

.skip-to-content-link {
	display: block;
	text-align: center;
	font-weight: bold;
	padding: 10px 20px;
	background: var(--base-white);
	box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
	left: 10px;
	top: 10px;
	position: absolute;
	z-index: 999999;
	transform: translateY(-200%);
	transition: transform 0.3s;
}

.skip-to-content-link:focus {
	transform: translateY(0%);
}

.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
    align-items: center;
    justify-content: space-between;
    padding: 2.4rem 4.8rem;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
}

.header.nav-up {
    top: -12rem;
}

.header.solid {
    /* background: var(--role-background-dark-primary); */
}

.logo-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
}

.logo-small img {
    display: block;
}

.footer {
    display: block;
    padding: var(--layout-padding-lg) 0;
    width: 100%;
    background: var(--base-dirt-600);
    color: var(--role-text-invert);
}

.footer-logo {
    display: block;
    width: 26rem;
}

ul.social {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1.6rem;
}

ul.social li {
    display: block;
}

ul.social li a {
    display: block;
    width: 2.4rem;
}

ul.social li a:hover {
    transform: scale(1.1,1.1) rotate(8deg);
}

ul.legal {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.8rem;
}

ul.legal li {
    display: block;
}

ul.legal li a {
    display: block;
    color: var(--base-sky-200);
}

ul.legal li a:hover {
    color: var(--base-sky-200);
}

.hero {
  position: relative;
  height: 100vh;
  min-height: 84rem;
  overflow: hidden;
  background: var(--base-sky-100);
}

.hero-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  will-change: transform;
}

.hero-content {
    z-index: 10;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 45rem;
    text-align: center;
}

.cloud {
    position: absolute;
    z-index: 9;
    pointer-events: none;
    user-select: none;
}

@keyframes moveCloud {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(-200px);
    }
}

.cloud-5 {
    top: 120px;
    animation: moveCloud 40s linear infinite;
    animation-delay: -20s;
}

.cloud-4 {
    top: 180px;
    animation: moveCloud 60s linear infinite;
    animation-delay: -5s;
}

.cloud-3 {
    top: 140px;
    animation: moveCloud 70s linear infinite;
    animation-delay: -25s;
}

.cloud-2 {
    top: 100px;
    animation: moveCloud 90s linear infinite;
    animation-delay: -10s;
}

.cloud-6 {
    top: 155px;
    animation: moveCloud 65s linear infinite;
    animation-delay: -45s;
}

.cloud-1 {
    top: 160px;
    animation: moveCloud 75s linear infinite;
    animation-delay: -40s;
}

.layer-1 { z-index: 1; }
.layer-2 { z-index: 2; }
.layer-3 { z-index: 3; }

.layer-1 {
    background: url('images/level-4.svg');
    background-size: 200rem auto;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.layer-2 {
    background: url('images/level-3.svg');
    background-size: 200rem auto;
    background-position: bottom 12.7rem center;
    background-repeat: no-repeat;
}

.layer-3 {
    background: url('images/level-2.svg');
    background-size: 200rem auto;
    background-position: bottom 10.5rem center;
    background-repeat: no-repeat;
}

.hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 57rem;
    z-index: 10;
}

.hero-bottom svg {
    display: block;
    width: 200rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.location {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--role-text-primary);
}

.location:hover {
    color: var(--base-ochre-500);
}

.location:before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
}

.location.address:before {
    background: url('images/ico-location.svg');
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    background-position: center center;
}

.location.phone:before {
    background: url('images/ico-phone.svg');
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    background-position: center center;    
}

.location.instagram:before {
    background: url('images/ico-instagram-alt.svg');
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    background-position: center center;    
}

.location.email:before {
    background: url('images/ico-mail.svg');
    background-size: 2.4rem 2.4rem;
    background-repeat: no-repeat;
    background-position: center center;    
}

.path-intro {
    background-image: url(images/path-green.svg);
    background-repeat: no-repeat;
    background-position: top left 4rem;
    background-size: auto 100%;
}

.path-faq {
    background-image: 
        url(images/path-blue-top.svg),
        url(images/path-blue-bottom.svg);
    background-repeat: no-repeat;
    background-position: 
        top left,
        bottom right;
    background-size: 
        29rem 33rem,
        29rem 33rem;
}

.path-story {
    background-image: url(images/path-beige.svg);
    background-repeat: no-repeat;
    background-position: bottom -4.8rem left;
    background-size: 29rem 33rem; 
}

.relative {
    position: relative;
    overflow: hidden;
}

.badge-1,
.badge-2,
.badge-3 {
    display: block;
    position: absolute;
    width: 8rem;
    /* cursor: pointer; */
    transition: none;
}

.badge-1 {
    bottom: 6.4rem;
    left: 36rem;

}

.badge-2 {
    top: 26rem;
    left: 2.4rem;
}

.badge-3 {
    bottom: 4.8rem;
    left: 22rem;
}

.badge-fixed {
    position: fixed !important;
    bottom: 2rem;
    right: 2rem;
    top: auto !important;
    left: auto !important;
    width: 6.4rem;
    z-index: 999;
}

#coupon-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
}

.modal-content {
    background: var(--base-white);
    max-width: 40rem;
    padding: 4.8rem 2.4rem 2.4rem 2.4rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 1rem;
}

.modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    font-size: 2.4rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--role-icon-interactive);
}

/* FULL SCREEN OVERLAY */

body.no-scroll {
    overflow: hidden;
}

.legal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;

    transform: translateY(100%);
    transition: transform 0.45s ease;
}

.legal-overlay.is-open {
    transform: translateY(0);
}

.legal-content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6.4rem 0rem;
}

.legal-close {
    position: fixed;
    top: 2.4rem;
    right: 2.4rem;
    font-size: 4.8rem;
    text-decoration: none;
    color: var(--role-icon-interactive);
    z-index: 10000;
}

.legal-close:hover {
    opacity: 0.6;
}

.rule-card {
    color: var(--role-text-primary);
    background-color: var(--role-background-light-primary);
    padding: var(--layout-padding-xl) var(--layout-padding-lg);
}

.rule-card ul {
    display: block;
    margin: 0;
}

.rule-card ul li {
    padding: 0 0 0 3.2rem;
    margin-bottom: 1.2rem;
    background: url('images/ico-check.svg');
    background-size: 2.4rem 2.4rem;
    background-position: left top;
    background-repeat: no-repeat;
}

/* ========================================================================== *\
   4. GENERAL CLASSES
\* ========================================================================== */

.clear {
    clear:both;
}

.clear.sm {
	height: 2rem !important;
}

.clear.md {
	height: 4rem !important;
}

.clear.lg {
	height: 6rem !important;
}

.clear.xl {
	height: 8rem !important;
}

.content {
	width: 1140px;
	margin: 0px auto;
}

.content.narrow {
    max-width: 74.8rem;
    margin: 0 auto;;
}

.text-highlight {
    color: var(--role-text-highlight-light);
}

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

.btn {
    display: inline-flex;
    flex-direction: row;
    gap: var(--layout-gap-xxs);
    padding: 1.2rem 3.2rem;
    border-radius: 100px;
    background-color: var(--base-ochre-500);
    color: var(--base-white);
    font-size: var(--label--md);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--base-ochre-500);
}

.btn:hover {
    background-color: var(--role-background-light-primary);
    color: var(--role-text-primary);
    border-color: var(--base-ochre-500);
}

.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.accordion {
    display: block;
    border: none;
    border-radius: 0.8rem;
    overflow: hidden;
    transition: background-color 0.3s ease;
    background: var(--base-sky-100);
}

.accordion.open {
    background: var(--base-white);
}

.accordion.open .accordion-header {
    font-weight: 700;
}

.accordion-header:focus {
  outline: none;
}

.accordion:focus-within {
  outline: 2px solid var(--base-ochre-400);
  outline-offset: 2px;
}


.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--body--md);
    font-weight: 400;
}

.accordion-title {
    text-align: left;
}

.accordion-icon {
    position: relative;
    width: 2rem;
    height: 2rem;
    transition: transform 0.3s ease;
}

.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    background-color: var(--role-icon-primary);
    transition: transform 0.3s ease;
}

.accordion-icon::before {
    width: 100%;
    height: 0.2rem;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.accordion-icon::after {
    width: 0.2rem;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.accordion.open .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    display: none;
    padding: 0 2.4rem 2.4rem 2.4rem;
    font-size: var(--body--sm);
    line-height: 125%;
}


/* ========================================================================== *\
   5. FORM STYLES
\* ========================================================================== */

input {
	-webkit-appearance: none;
	border-radius: 0;
}

label {
	color: #000000 !important;
	font-size: 20px !important;
	font-weight: bold;
}

input[type=text],
input[type=password],
input[type=email],
input[type=tel] {
	padding: 15px 20px !important;
	margin: 0 0 5px 0;
	border-radius: 0px;
	background-color: #fff;
	color: #666666;
	display: block;
	font-size: 16px;
	width: 100% !important;
	border: 1px solid #818A8F;
	font-family: 'Nunito Sans', sans-serif;
}

textarea {
	padding: 20px 20px !important;
	margin: 0 0 20px 0;
	border-radius: 0px !important;
	background-color: #fff;
	color: #333333;
	display: block;
	line-height: 20px;
	font-size: 18px !;
	width: 100% !important;
	height: 220px;
	font-family: 'Nunito Sans', sans-serif;
	border: 1px solid #818A8F;
	border-radius: 0px;
}

input[type=submit],
input[type=button] {
	display: inline-block;
	color: var(--base-white);
	border-radius: 0px;
	padding: 10px 40px;
	font-size: 16px !important;
	line-height: 20px;
	text-decoration: none;
	background-color: #111111;
	border: 2px solid #111111;
	transition: .5s ease-in-out;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
}

input[type=submit]:hover,
input[type=button]:hover {
	color: var(--base-white);
	background-color: #000000;
	border-color: #000000;
}

input[type=submit]:focus,
input[type=button]:focus {
	background-color: #000000;
	color: var(--base-white);
	border-color: #000000;
}

select {
	display: block;
	width: 100% !important;
	height: 55px !important;
	box-sizing: border-box;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: 0px 60px 0 20px !important;
   margin-bottom: 0px;
   border: 1px solid #818A8F;
   border-radius: 0px !important;
   color: #666666;
   opacity: 1;
   font-size: 18px;
   cursor: pointer;
   -webkit-border-radius: 3px !important;
   background-image: url('images/select.svg');
   background-position: right 20px center;
   background-repeat: no-repeat;
   background-size: 18px 12px;
   background-color: var(--base-white);
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	cursor: pointer;
	text-transform: none !important;
}

input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label {
	color: #000000 !important;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
	opacity: 1;
	top: 3px;
}

input:focus,
textarea:focus,
input[type="file"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
	border-color: #000000;
}

input[type="file"] {
	border: 2px solid #111111;
	color: #111111;
	display: inline-block;
	padding: 20px;
	cursor: pointer;
	background: var(--base-white);
}

input[type="checkbox"],
input[type="radio"] {
	opacity: 0;
	outline: none;
	z-index: 100;
	width: 27px;
	height: 27px;
	top: 0;
	left: 0;
	position: absolute;
	appearance: none;
	cursor: pointer;
}

.validation_message {
	color: red;
}

/* ========================================================================== *\
   6. LAYOUT
\* ========================================================================== */

/* ====================================== *\
   6.1 COLUMNS
\* ====================================== */

.columns {
    display: flex;
    flex-direction: row;
    gap: var(--layout-base-gutter);
}

.col {
    display: block;
    width: unset;
}

/*
    Mobile: max-width 600px
    Use the naming: .col-xs-*
*/

@media screen and (max-width: 600px) {
    .col-xs-1 { flex-basis: calc((100% / 12) * 1);  max-width: calc((100% / 12) * 1); }
    .col-xs-2 { flex-basis: calc((100% / 12) * 2);  max-width: calc((100% / 12) * 2); }
    .col-xs-3 { flex-basis: calc((100% / 12) * 3);  max-width: calc((100% / 12) * 3); }
    .col-xs-4 { flex-basis: calc((100% / 12) * 4);  max-width: calc((100% / 12) * 4); }
    .col-xs-5 { flex-basis: calc((100% / 12) * 5);  max-width: calc((100% / 12) * 5); }
    .col-xs-6 { flex-basis: calc((100% / 12) * 6);  max-width: calc((100% / 12) * 6); }
    .col-xs-7 { flex-basis: calc((100% / 12) * 7);  max-width: calc((100% / 12) * 7); }
    .col-xs-8 { flex-basis: calc((100% / 12) * 8);  max-width: calc((100% / 12) * 8); }
    .col-xs-9 { flex-basis: calc((100% / 12) * 9);  max-width: calc((100% / 12) * 9); }
    .col-xs-10 { flex-basis: calc((100% / 12) * 10); max-width: calc((100% / 12) * 10); }
    .col-xs-11 { flex-basis: calc((100% / 12) * 11); max-width: calc((100% / 12) * 11); }
    .col-xs-12 { flex-basis: calc((100% / 12) * 12); max-width: calc((100% / 12) * 12); }
}

/*
    Tablet Portrait: 601px to 800px
    Use the naming: .col-sm-*
*/

@media screen and (min-width: 601px) and (max-width: 800px) {
    .col-sm-1 { flex-basis: calc((100% / 12) * 1);  max-width: calc((100% / 12) * 1); }
    .col-sm-2 { flex-basis: calc((100% / 12) * 2);  max-width: calc((100% / 12) * 2); }
    .col-sm-3 { flex-basis: calc((100% / 12) * 3);  max-width: calc((100% / 12) * 3); }
    .col-sm-4 { flex-basis: calc((100% / 12) * 4);  max-width: calc((100% / 12) * 4); }
    .col-sm-5 { flex-basis: calc((100% / 12) * 5);  max-width: calc((100% / 12) * 5); }
    .col-sm-6 { flex-basis: calc((100% / 12) * 6);  max-width: calc((100% / 12) * 6); }
    .col-sm-7 { flex-basis: calc((100% / 12) * 7);  max-width: calc((100% / 12) * 7); }
    .col-sm-8 { flex-basis: calc((100% / 12) * 8);  max-width: calc((100% / 12) * 8); }
    .col-sm-9 { flex-basis: calc((100% / 12) * 9);  max-width: calc((100% / 12) * 9); }
    .col-sm-10 { flex-basis: calc((100% / 12) * 10); max-width: calc((100% / 12) * 10); }
    .col-sm-11 { flex-basis: calc((100% / 12) * 11); max-width: calc((100% / 12) * 11); }
    .col-sm-12 { flex-basis: calc((100% / 12) * 12); max-width: calc((100% / 12) * 12); }
}

/*
    Tablet Landscape: 801px to 1140px
    Use the naming: .col-md-*
*/

@media screen and (min-width: 801px) and (max-width: 1140px) {
    .col-md-1 { flex-basis: calc((100% / 12) * 1);  max-width: calc((100% / 12) * 1); }
    .col-md-2 { flex-basis: calc((100% / 12) * 2);  max-width: calc((100% / 12) * 2); }
    .col-md-3 { flex-basis: calc((100% / 12) * 3);  max-width: calc((100% / 12) * 3); }
    .col-md-4 { flex-basis: calc((100% / 12) * 4);  max-width: calc((100% / 12) * 4); }
    .col-md-5 { flex-basis: calc((100% / 12) * 5);  max-width: calc((100% / 12) * 5); }
    .col-md-6 { flex-basis: calc((100% / 12) * 6);  max-width: calc((100% / 12) * 6); }
    .col-md-7 { flex-basis: calc((100% / 12) * 7);  max-width: calc((100% / 12) * 7); }
    .col-md-8 { flex-basis: calc((100% / 12) * 8);  max-width: calc((100% / 12) * 8); }
    .col-md-9 { flex-basis: calc((100% / 12) * 9);  max-width: calc((100% / 12) * 9); }
    .col-md-10 { flex-basis: calc((100% / 12) * 10); max-width: calc((100% / 12) * 10); }
    .col-md-11 { flex-basis: calc((100% / 12) * 11); max-width: calc((100% / 12) * 11); }
    .col-md-12 { flex-basis: calc((100% / 12) * 12); max-width: calc((100% / 12) * 12); }
}

/*
    Tablet Portrait: 1141px+
    Use the naming: .col-lg-*
*/

@media screen and (min-width: 1141px) {
    .col-lg-1 { flex-basis: calc((100% / 12) * 1);  max-width: calc((100% / 12) * 1); }
    .col-lg-2 { flex-basis: calc((100% / 12) * 2);  max-width: calc((100% / 12) * 2); }
    .col-lg-3 { flex-basis: calc((100% / 12) * 3);  max-width: calc((100% / 12) * 3); }
    .col-lg-4 { flex-basis: calc((100% / 12) * 4);  max-width: calc((100% / 12) * 4); }
    .col-lg-5 { flex-basis: calc((100% / 12) * 5);  max-width: calc((100% / 12) * 5); }
    .col-lg-6 { flex-basis: calc((100% / 12) * 6);  max-width: calc((100% / 12) * 6); }
    .col-lg-7 { flex-basis: calc((100% / 12) * 7);  max-width: calc((100% / 12) * 7); }
    .col-lg-8 { flex-basis: calc((100% / 12) * 8);  max-width: calc((100% / 12) * 8); }
    .col-lg-9 { flex-basis: calc((100% / 12) * 9);  max-width: calc((100% / 12) * 9); }
    .col-lg-10 { flex-basis: calc((100% / 12) * 10); max-width: calc((100% / 12) * 10); }
    .col-lg-11 { flex-basis: calc((100% / 12) * 11); max-width: calc((100% / 12) * 11); }
    .col-lg-12 { flex-basis: calc((100% / 12) * 12); max-width: calc((100% / 12) * 12); }
}

/* ====================================== *\
   6.2 GRID BEHAVIOUR
\* ====================================== */

@media screen and (max-width: 600px) {
    .reverse-xs {
        flex-direction: row-reverse;
    }

    .wrap-xs {
        flex-flow: row wrap;
    }

    .reverse-xs.wrap-xs {
        flex-flow: wrap-reverse;
    }
}

@media screen and (min-width:601px) and (max-width:800px) {
    .wrap-sm {
        flex-flow: row wrap;
    }
}

/* ====================================== *\
   6.3 FLEX CONTAINER
\* ====================================== */

.flex-container {
    display: flex;
    gap: var(--layout-gap-md);
}

/* Direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

/* Gaps - Can be used with columns */
.gap-xxxs { gap: var(--layout-gap-xxxs); }
.gap-xxs { gap: var(--layout-gap-xxs); }
.gap-xs { gap: var(--layout-gap-xs); }
.gap-sm { gap: var(--layout-gap-sm); }
.gap-md { gap: var(--layout-gap-md); }
.gap-lg { gap: var(--layout-gap-lg); }
.gap-xl { gap: var(--layout-gap-xl); }
.gap-2xl { gap: var(--layout-gap-2xl); }
.gap-3xl { gap: var(--layout-gap-3xl); }
.gap-4xl { gap: var(--layout-gap-4xl); }

/* Alignment - Can be used with columns */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; width: 100%; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* ====================================== *\
   6.4 GRID CONTAINER
\* ====================================== */

.grid {
    display: grid;
}

@media screen and (max-width: 600px) {
    .grid-xs-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-xs-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-xs-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-xs-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-xs-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-xs-6 { grid-template-columns: repeat(6, 1fr); }
    .grid-xs-7 { grid-template-columns: repeat(6, 1fr); }
    .grid-xs-8 { grid-template-columns: repeat(6, 1fr); }
    .grid-xs-9 { grid-template-columns: repeat(6, 1fr); }
    .grid-xs-10 { grid-template-columns: repeat(6, 1fr); }
}

@media screen and (min-width: 601px) and (max-width: 800px) {
    .grid-sm-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-sm-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-sm-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-sm-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-sm-6 { grid-template-columns: repeat(6, 1fr); }
    .grid-sm-7 { grid-template-columns: repeat(6, 1fr); }
    .grid-sm-8 { grid-template-columns: repeat(6, 1fr); }
    .grid-sm-9 { grid-template-columns: repeat(6, 1fr); }
    .grid-sm-10 { grid-template-columns: repeat(6, 1fr); }
}

@media screen and (min-width: 801px) and (max-width: 1140px) {
    .grid-md-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-md-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-md-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-md-6 { grid-template-columns: repeat(6, 1fr); }
    .grid-md-7 { grid-template-columns: repeat(6, 1fr); }
    .grid-md-8 { grid-template-columns: repeat(6, 1fr); }
    .grid-md-9 { grid-template-columns: repeat(6, 1fr); }
    .grid-md-10 { grid-template-columns: repeat(6, 1fr); }
}

@media screen and (min-width: 1141px) {
    .grid-lg-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-lg-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
    .grid-lg-7 { grid-template-columns: repeat(6, 1fr); }
    .grid-lg-8 { grid-template-columns: repeat(6, 1fr); }
    .grid-lg-9 { grid-template-columns: repeat(6, 1fr); }
    .grid-lg-10 { grid-template-columns: repeat(6, 1fr); }
}

/* ====================================== *\
   6.5 PADDING
\* ====================================== */

.padding-all-xxs { padding: var(--layout-padding-xxs); }
.padding-all-xs { padding: var(--layout-padding-xs); }
.padding-all-sm { padding: var(--layout-padding-sm); }
.padding-all-md { padding: var(--layout-padding-md); }
.padding-all-lg { padding: var(--layout-padding-lg); }
.padding-all-xl { padding: var(--layout-padding-xl); }
.padding-all-2xl { padding: var(--layout-padding-2xl); }
.padding-all-3xl { padding: var(--layout-padding-3xl); }
.padding-all-4xl { padding: var(--layout-padding-4xl); }
.padding-all-5xl { padding: var(--layout-padding-5xl); }

.padding-top-xxs { padding-top: var(--layout-padding-xxs); }
.padding-top-xs { padding-top: var(--layout-padding-xs); }
.padding-top-sm { padding-top: var(--layout-padding-sm); }
.padding-top-md { padding-top: var(--layout-padding-md); }
.padding-top-lg { padding-top: var(--layout-padding-lg); }
.padding-top-xl { padding-top: var(--layout-padding-xl); }
.padding-top-2xl { padding-top: var(--layout-padding-2xl); }
.padding-top-3xl { padding-top: var(--layout-padding-3xl); }
.padding-top-4xl { padding-top: var(--layout-padding-4xl); }
.padding-top-5xl { padding-top: var(--layout-padding-5xl); }

.padding-right-xxs { padding-right: var(--layout-padding-xxs); }
.padding-right-xs { padding-right: var(--layout-padding-xs); }
.padding-right-sm { padding-right: var(--layout-padding-sm); }
.padding-right-md { padding-right: var(--layout-padding-md); }
.padding-right-lg { padding-right: var(--layout-padding-lg); }
.padding-right-xl { padding-right: var(--layout-padding-xl); }
.padding-right-2xl { padding-right: var(--layout-padding-2xl); }
.padding-right-3xl { padding-right: var(--layout-padding-3xl); }
.padding-right-4xl { padding-right: var(--layout-padding-4xl); }

.padding-bottom-xxs { padding-bottom: var(--layout-padding-xxs); }
.padding-bottom-xs { padding-bottom: var(--layout-padding-xs); }
.padding-bottom-sm { padding-bottom: var(--layout-padding-sm); }
.padding-bottom-md { padding-bottom: var(--layout-padding-md); }
.padding-bottom-lg { padding-bottom: var(--layout-padding-lg); }
.padding-bottom-xl { padding-bottom: var(--layout-padding-xl); }
.padding-bottom-2xl { padding-bottom: var(--layout-padding-2xl); }
.padding-bottom-3xl { padding-bottom: var(--layout-padding-3xl); }
.padding-bottom-4xl { padding-bottom: var(--layout-padding-4xl); }
.padding-bottom-5xl { padding-bottom: var(--layout-padding-5xl); }

.padding-left-xxs { padding-left: var(--layout-padding-xxs); }
.padding-left-xs { padding-left: var(--layout-padding-xs); }
.padding-left-sm { padding-left: var(--layout-padding-sm); }
.padding-left-md { padding-left: var(--layout-padding-md); }
.padding-left-lg { padding-left: var(--layout-padding-lg); }
.padding-left-xl { padding-left: var(--layout-padding-xl); }
.padding-left-2xl { padding-left: var(--layout-padding-2xl); }
.padding-left-3xl { padding-left: var(--layout-padding-3xl); }
.padding-left-4xl { padding-left: var(--layout-padding-4xl); }

/* ====================================== *\
   6.6 BORDER
\* ====================================== */

.radius-none { border-radius: var(--radius-none); }
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-2xl { border-radius: var(--radius-2xl); }
.radius-3xl { border-radius: var(--radius-3xl); }


/* ====================================== *\
   6.7 BACKGROUNDS
\* ====================================== */

.bg-light-primary {
    background-color: var(--role-background-light-primary);
}

.bg-light-secondary {
    background-color: var(--role-background-light-secondary);
}

.bg-dark-primary,
.bg-dark-secondary,
.bg-dark-tertiary {
    color: var(--role-text-invert);
}

.bg-dark-primary {
    background-color: var(--role-background-dark-primary);
}

.bg-dark-secondary {
    background-color: var(--role-background-dark-secondary);
}

.bg-dark-tertiary {
    background-color: var(--role-background-dark-tertiary);
}

.bg-dark-primary .text-highlight,
.bg-dark-secondary .text-highlight,
.bg-dark-tertiary .text-highlight {
    color: var(--role-text-highlight-dark);
}