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

.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;
}

.invert-link {
    color: var(--role-text-highlight-dark);
}

.invert-link:hover {
    color: var(--role-text-invert);
}

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

::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: -14rem;
}

.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; 
}

.path-mailing {
    display: block;
    width: 100%;
    height: 100% !important;
}

.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
\* ========================================================================== */

.mailing-list-form {
    display: block;
    width: 100%;
}

.newsletter-form {
    position: relative;
}

input[type=email].newsletter-input {
    width: 100%;
    height: 6.4rem;
    border-radius: 100px;
    position: relative;
    z-index: 1;
    color: var(--role-text-primary);
}

input[type=email].newsletter-input::placeholder {
    opacity: 1;
}
						
.newsletter-button {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    z-index: 5;

    display: inline-flex;
    flex-direction: row;
    cursor: pointer;
    transition: ease-in-out 300ms;
    align-items: center;
    gap: var(--layout-gap-xxs);
    padding: 0 4.8rem;
    height: 5.6rem;
    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);
}

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

.newsletter-success,
.newsletter-error {
    text-align: right;
    padding: 1.6rem;
}

.input--hidden {
    display: none;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

input {
	-webkit-appearance: none;
    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: 1.6rem 3.2rem !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);
}

/* SIGN TAG */

.sign-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--role-background-dark-secondary);
    color: var(--role-text-invert);
    padding: 4px 8px 4px 16px;
    margin: 0 4px;
    transform: rotate(-2deg) translateY(2px);
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
}

.sign-tag-arrow {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* NAV LINKS */

.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
}

.menu ul {
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
    align-items: center;
}

.menu ul li a {
    font-size: var(--label--md);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--role-text-interactive);
    text-decoration: none;
}

.menu ul li a:hover {
    color: var(--base-ochre-500);
}

/* SECONDARY BUTTON */

.btn.btn-secondary {
    background-color: var(--base-sand-100);
    color: var(--role-text-primary);
    border-color: var(--base-ochre-400);
}

.btn.btn-secondary:hover {
    background-color: var(--base-ochre-500);
    color: var(--base-white);
    border-color: var(--base-ochre-500);
}

/* TERTIARY BUTTON (text + arrow) */

.btn-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--label--md);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--role-text-highlight-dark);
}

.btn-tertiary:hover {
    color: var(--role-text-highlight-dark);
}

.btn-tertiary img {
    width: 2.4rem;
    height: 2.4rem;
    transition: transform 0.2s ease;
}

.btn-tertiary:hover img {
    transform: translateX(0.4rem);
}

/* BOOK VISIT SECTION */

.book-visit {
    display: flex;
    gap: 3.2rem;
    align-items: flex-start;
}

.book-visit-left {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    flex: 0 0 48%;
}

.book-visit-actions {
    display: flex;
    gap: 1.6rem;
    align-items: center;
}

/* NOTICE CARD */

.notice-card {
    flex: 1;
    background-color: var(--role-background-light-primary);
    color: var(--role-text-primary);
    padding: 2.4rem 3.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.notice-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
    font-size: var(--body--md);
}

.notice-card-header img {
    width: 2.4rem;
    height: 2.4rem;
}

/* PRICING CARDS */

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.1rem;
    width: 100%;
}

.pricing-card {
    background-color: var(--role-background-dark-secondary);
    color: var(--role-text-invert);
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.4rem;
}

.pricing-card-content {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ACCORDION WITH IMAGE */

.accordion-content-columns {
    display: flex;
    gap: 2.4rem;
    align-items: flex-start;
}

.accordion-content-columns img {
    flex: 0 0 26.5rem;
    width: 26.5rem;
    height: 19rem;
    object-fit: cover;
}

/* PRICING BACKGROUND PATH */

#location {
    background-image: url('images/path-pricing.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* PRICING CARD BUTTON (centered, no border) */

.btn.btn-pricing {
    width: 100%;
    justify-content: center;
    background-color: var(--base-sand-100);
    color: var(--role-text-primary);
    border-color: transparent;
}

.btn.btn-pricing:hover {
    background-color: var(--base-ochre-500);
    color: var(--base-white);
    border-color: transparent;
}

/* HEADER SOLID BACKGROUND */

.header.solid {
    background-color: var(--base-sky-100);
}

/* HAMBURGER BUTTON */

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    width: 3.2rem;
    height: 3.2rem;
    position: relative;
    flex-shrink: 0;
}

.nav-hamburger span {
    display: block;
    position: absolute;
    height: 0.25rem;
    width: 100%;
    background-color: var(--role-text-interactive);
    border-radius: 2px;
    left: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.nav-hamburger span:nth-child(1) { top: 20%; }
.nav-hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-hamburger span:nth-child(3) { top: 80%; transform: translateY(-100%); }

.nav-hamburger.is-open span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.nav-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}

.nav-hamburger.is-open span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* FULLSCREEN NAV OVERLAY */

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--base-sky-100);
    z-index: 998;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.2rem;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-overlay.is-open {
    display: flex;
}

.nav-overlay.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-overlay ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    list-style: none;
}

.nav-overlay ul li a {
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--role-text-interactive);
}

.nav-overlay ul li a:hover {
    color: var(--base-ochre-500);
}

/* RESPONSIVE HEADER @ 1200px */

@media (max-width: 1200px) {
    .menu {
        display: none;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 1.2rem;
    }

    .nav-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn.btn-sm {
        padding: 0.8rem 2rem;
        font-size: 1.4rem;
    }
}

.header-right {
    display: none;
}

@media (max-width: 1200px) {
    .header-right {
        display: flex;
    }
}

/* ========================================================================== *\
   POLAROID CAROUSEL
\* ========================================================================== */

.polaroid-carousel {
	position: relative;
	width: 100%;
	min-width: 20rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* The carousel's own children are all position:absolute, so it has no
   in-flow content to give its parent column an intrinsic width. Without
   this, the column collapses to 0 and the carousel disappears anywhere
   the grid doesn't set an explicit column width (i.e. below 1141px).
   Its sibling column needs the same treatment: a flex item with only
   flex-basis:0 opts out of the shrink calculation, so if the sibling's
   text content isn't also allowed to shrink, it claims the whole row
   and still leaves the carousel at 0. */
@media screen and (max-width: 1140px) {
	.columns-carousel > .col {
		flex: 1 1 0%;
		min-width: 0;
		width: 100%;
	}
}

/* wrap-xs stacks columns below 600px; give each the full row so they
   actually stack instead of splitting the row 50/50. */
@media screen and (max-width: 600px) {
	.columns-carousel > .col {
		flex: 1 1 100%;
	}
}

.polaroid-carousel-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform, opacity;
}

.polaroid-carousel-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	border: 10px solid #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
}

.polaroid-carousel-slide:nth-child(1) { animation-delay: 0s; }
.polaroid-carousel-slide:nth-child(2) { animation-delay: -3s; }
.polaroid-carousel-slide:nth-child(3) { animation-delay: -6s; }
.polaroid-carousel-slide:nth-child(4) { animation-delay: -9s; }
.polaroid-carousel-slide:nth-child(5) { animation-delay: -12s; }
.polaroid-carousel-slide:nth-child(6) { animation-delay: -15s; }
.polaroid-carousel-slide:nth-child(7) { animation-delay: -18s; }
.polaroid-carousel-slide:nth-child(8) { animation-delay: -21s; }
.polaroid-carousel-slide:nth-child(9) { animation-delay: -24s; }

/* The settled/visible frame sits at rotate(0) scale(1) so it exactly fills
   the container and never clips against overflow: hidden. Only the
   entry/exit frames tilt, and they do so at a reduced scale so their
   rotated bounding box still stays within the container. */
.polaroid-carousel--5 .polaroid-carousel-slide {
	animation-name: polaroidFlip5;
	animation-duration: 15s;
}

.polaroid-carousel--4 .polaroid-carousel-slide {
	animation-name: polaroidFlip4;
	animation-duration: 12s;
}

.polaroid-carousel--2 .polaroid-carousel-slide {
	animation-name: polaroidFlip2;
	animation-duration: 6s;
}

.polaroid-carousel--3 .polaroid-carousel-slide {
	animation-name: polaroidFlip3;
	animation-duration: 9s;
}

/* Joey's About photos are portrait-oriented; give the three-photo carousel
   enough vertical room to show the full frame without cropping. */
.polaroid-carousel--3 {
	aspect-ratio: 9 / 16;
}

@keyframes polaroidFlip5 {
	0%,
	100% {
		opacity: 0;
		transform: rotate(9deg) scale(0.85) translateY(18px);
		z-index: 1;
	}
	2.4%,
	17% {
		opacity: 1;
		transform: rotate(0) scale(1) translateY(0);
		z-index: 5;
	}
	19% {
		opacity: 0;
		transform: rotate(-9deg) scale(0.85) translateY(-18px);
		z-index: 1;
	}
}

@keyframes polaroidFlip4 {
	0%,
	100% {
		opacity: 0;
		transform: rotate(9deg) scale(0.85) translateY(18px);
		z-index: 1;
	}
	3%,
	21.25% {
		opacity: 1;
		transform: rotate(0) scale(1) translateY(0);
		z-index: 5;
	}
	23.75% {
		opacity: 0;
		transform: rotate(-9deg) scale(0.85) translateY(-18px);
		z-index: 1;
	}
}

@keyframes polaroidFlip2 {
	0%,
	100% {
		opacity: 0;
		transform: rotate(9deg) scale(0.85) translateY(18px);
		z-index: 1;
	}
	6%,
	42% {
		opacity: 1;
		transform: rotate(0) scale(1) translateY(0);
		z-index: 5;
	}
	48% {
		opacity: 0;
		transform: rotate(-9deg) scale(0.85) translateY(-18px);
		z-index: 1;
	}
}

@keyframes polaroidFlip3 {
	0%,
	100% {
		opacity: 0;
		transform: rotate(9deg) scale(0.85) translateY(18px);
		z-index: 1;
	}
	4%,
	27% {
		opacity: 1;
		transform: rotate(0) scale(1) translateY(0);
		z-index: 5;
	}
	31% {
		opacity: 0;
		transform: rotate(-9deg) scale(0.85) translateY(-18px);
		z-index: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.polaroid-carousel-slide {
		animation: none;
	}

	.polaroid-carousel-slide:nth-child(1) {
		opacity: 1;
		transform: none;
	}
}