/* FONTS */

@font-face {
    font-family: 'PP Gatwick Variable';
    src: url('../fonts/public/Gatwick-Variable.woff2') format('woff2'),
        url('../fonts/public/Gatwick-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Ivar Hand';
    src: url('../fonts/public/IvarHand-Regular.woff2') format('woff2'),
        url('../fonts/public/IvarHand-Regular.ttf') format('truetype');
}

/* START */

:root {
    /* color */
    --white: #E9EBE4;

    --darkBrown: #332315;
    --midBrown: #753E1A;
    --midBrown-2: #855d33;
    --brown: #A15825;
/*    --lightBrown: #CB9169;*/
    --lightBrown: #ca9c77;
    --whiteBrown: #deb28c;


    --darkPink: #BB7658;
    --midPink: #e8ad8d;
    --pink: #F8C69E;
    --lightPink: #FEDEC2;
    --whitePink: #ffebdb;

    --darkGreen: #303c22;
    --midGreen: #616D3F;
    --green: #848854;
    --lightGreen: #d1ceb5;
    --whiteGreen: #e7e5d1;

    --darkBeige: #725e2f;
    --midBeige: #9A8657;
    --beige: #D9C49E;
    --lightBeige: #EBDBC0;
    --whiteBeige: #fceed7;
    
    --darkRed: #7d2318;
    --midRed: #913227;
    --red: red;
    --lightRed: red;
    --whiteRed: #fffed9;

    /* typography */
    --serifType: "PP Gatwick Variable", sans-serif;
    --handType: "Ivar Hand", monospace;

    --ultraLightWGHT: "wght"200;
    --lightWGHT: "wght"300;
    --regularWGHT: "wght"450;
    --mediumWGHT: "wght"520;
    --boldWGHT: "wght"640;
    --ultraBoldWGHT: "wght"800;

    /* mesurements */
    --spacing: 1rem;
    --lineStroke: .15rem;
    --indent: 5rem;
    --corner: 0rem;
}

/* COLOR THEMES */

.brown-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--midBrown);
    --theme-background-accent: var(--lightBrown);

    --theme-ui: var(--pink);
    --theme-ui-accent: var(--lightBrown);

    --theme-text: var(--lightBrown);
    --theme-text: var(--lightBrown);
    --theme-text-accent: var(--pink);
    --theme-btn-background: var(--lightBrown);
    --theme-btn-text: var(--pink);

    --theme-graphics: var(--lightBrown);
    --theme-graphics-background: var(--brown);
    --theme-graphics-text: var(--pink);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--whiteBrown);
    --theme-alt-background-accent: var(--midBrown-2);

    --theme-alt-ui: var(--lightBrown);
    --theme-alt-ui-accent: var(--midBrown-2);

    --theme-alt-text: var(--midBrown-2);
    --theme-alt-text-accent: var(--midBrown);
    --theme-alt-btn-background: var(--lightBrown);
    --theme-alt-btn-text: var(--brown);
}

.lightbrown-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--whiteBrown);
    --theme-background-accent: var(--midBrown-2);

    --theme-ui: var(--midBrown);
    --theme-ui-accent: var(--lightBrown);

    --theme-text: var(--midBrown-2);
    --theme-text-accent: var(--pink);
    --theme-btn-background: var(--lightBrown);
    --theme-btn-text: var(--pink);

    --theme-graphics: var(--brown);
    --theme-graphics-background: var(--pink);
    --theme-graphics-text: var(--midBrown-2);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--lightBrown);
    --theme-alt-background-accent: var(--darkBrown);

    --theme-alt-ui: var(--whiteBrown);
    --theme-alt-ui-accent: var(--midBrown);

    --theme-alt-text: var(--midBrown-2);
    --theme-alt-text-accent: var(--midBrown-2);
    --theme-alt-btn-background: var(--whiteBrown);
    --theme-alt-btn-text: var(--midBrown-2);
}


.green-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--midGreen);
    --theme-background-accent: var(--darkGreen);

    --theme-ui: var(--lightBeige);
    --theme-ui-accent: var(--lightBeige);

    --theme-text: var(--beige);
    --theme-text-accent: var(--darkGreen);
    --theme-btn-background: var(--beige);
    --theme-btn-text: var(--darkGreen);

    --theme-graphics: var(--darkGreen);
    --theme-graphics-background: var(--green);
    --theme-graphics-text: var(--darkGreen);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--beige);
    --theme-alt-background-accent: var(--midBeige);

    --theme-alt-ui: var(--lightBeige);
    --theme-alt-ui-accent: var(--darkGreen);

    --theme-alt-text: var(--midBeige);
    --theme-alt-text-accent: var(--midGreen);
    --theme-alt-btn-background: var(--midGreen);
    --theme-alt-btn-text: var(--beige);
}

.lightgreen-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--lightGreen);
    --theme-background-accent: var(--green);

    --theme-ui: var(--darkBeige);
    --theme-ui-accent: var(--midGreen);

    --theme-text: var(--green);
    --theme-text-accent: var(--midGreen);
    --theme-btn-background: var(--midGreen);
    --theme-btn-text: var(--lightBeige);

    --theme-graphics: var(--midGreen);
    --theme-graphics-background: var(--whiteGreen);
    --theme-graphics-text: var(--midGreen);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--green);
    --theme-alt-background-accent: var(--lightBeige);

    --theme-alt-ui: var(--lightBeige);
    --theme-alt-ui-accent: var(--darkGreen);

    --theme-alt-text: var(--beige);
    --theme-alt-text-accent: var(--lightBeige);
    --theme-alt-btn-background: var(--lightBeige);
    --theme-alt-btn-text: var(--green);
}

.pink-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--pink);
    --theme-background-accent: var(--midPink);

    --theme-ui: var(--brown);
    --theme-ui-accent: var(--midBrown);

    --theme-text: var(--darkPink);
    --theme-text-accent: var(--lightPink);
    --theme-btn-background: var(--darkPink);
    --theme-btn-text: var(--lightPink);

    --theme-graphics: var(--darkPink);
    --theme-graphics-background: var(--lightPink);
    --theme-graphics-text: var(--darkPink);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--darkPink);
    --theme-alt-background-accent: var(--pink);

    --theme-alt-ui: var(--lightPink);
    --theme-alt-ui-accent: var(--midBrown);

    --theme-alt-text: var(--pink);
    --theme-alt-text-accent: var(--lightPink);
    --theme-alt-btn-background: var(--lightPink);
    --theme-alt-btn-text: var(--darkPink);
}

.lightpink-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--lightPink);
    --theme-background-accent: var(--pink);

    --theme-ui: var(--lightBrown);
    --theme-ui-accent: var(--midBrown);

    --theme-text: var(--darkPink);
    --theme-text-accent: var(--brown);
    --theme-btn-background: var(--darkPink);
    --theme-btn-text: var(--lightPink);

    --theme-graphics: var(--darkPink);
    --theme-graphics-background: var(--whitePink);
    --theme-graphics-text: var(--darkPink);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--midPink);
    --theme-alt-background-accent: var(--darkPink);

    --theme-alt-ui: var(--lightPink);
    --theme-alt-ui-accent: var(--midBrown);

    --theme-alt-text: var(--darkPink);
    --theme-alt-text-accent: var(--midBrown);
    --theme-alt-btn-background: var(--lightPink);
    --theme-alt-btn-text: var(--midPink);
}


.beige-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--beige);
    --theme-background-accent: var(--midBeige);

    --theme-ui: var(--darkBeige);
    --theme-ui-accent: var(--darkGreen);

    --theme-text: var(--midBeige);
    --theme-text-accent: var(--midGreen);
    --theme-btn-background: var(--midGreen);
    --theme-btn-text: var(--beige);

    --theme-graphics: var(--midGreen);
    --theme-graphics-background: var(--lightBeige);
    --theme-graphics-text: var(--midBeige);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--lightBeige);
    --theme-alt-background-accent: var(--beige);

    --theme-alt-ui: var(--whiteBeige);
    --theme-alt-ui-accent: var(--darkBeige);

    --theme-alt-text: var(--midBeige);
    --theme-alt-text-accent: var(--midBeige);
    --theme-alt-btn-background: var(--beige);
    --theme-alt-btn-text: var(--darkBeige);
}

.lightbeige-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--lightBeige);
    --theme-background-accent: var(--beige);

    --theme-ui: var(--green);
    --theme-ui-accent: var(--darkGreen);

    --theme-text: var(--midBeige);
    --theme-text-accent: var(--darkGreen);
    --theme-btn-background: var(--midGreen);
    --theme-btn-text: var(--lightBeige);

    --theme-graphics: var(--midGreen);
    --theme-graphics-background: var(--whiteBeige);
    --theme-graphics-text: var(--midBeige);

    /* SECONDARY SCHEME */
    --theme-alt-background: var(--beige);
    --theme-alt-background-accent: var(--midBeige);

    --theme-alt-ui: var(--lightBeige);
    --theme-alt-ui-accent: var(--darkGreen);

    --theme-alt-text: var(--midBeige);
    --theme-alt-text-accent: var(--midGreen);
    --theme-alt-btn-background: var(--midGreen);
    --theme-alt-btn-text: var(--beige);
}

::scrollbar,
*::scrollbar {
    display: none;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px transparent;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

::selection {
    background: var(--theme-text);
    color: var(--white);
    fill: var(--white);
}

.alt-theme ::selection {
    background: var(--theme-alt-text);
    color: var(--white);
}

@media screen and (max-width: 900px) {
    :root {
        /* mesurements */
        --indent: 4rem;
    }
}


@media screen and (max-width: 700px) {
    :root {
        /* mesurements */
        --indent: 2rem;
    }
}

.obfuscate {
    filter: blur(1.6rem);
}

.bg-grain {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 300;
    transform: translateZ(0);
}

.bg-grain:before {
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 9999;
    position: fixed;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABWIAAAViAHE10CgAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDgtMzFUMTI6Mjk6MTIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDgtMzFUMTI6NDgrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA4LTMxVDEyOjQ4KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4Zjg5ZjkxYS03MTFmLTRhMjQtOWNjMS1lZmQzMDUxYzU5M2EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OGY4OWY5MWEtNzExZi00YTI0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');
    pointer-events: none;
    -webkit-animation: noise 3s steps(2) infinite;
    animation: noise 3s steps(2) infinite;
}

.brown-theme .bg-grain,
.green-theme .bg-grain,
.beige-theme .bg-grain {
    opacity: .15;
}

.lightgreen-theme .bg-grain,
.lightpink-theme .bg-grain,
.pink-theme .bg-grain,
.lightbeige-theme .bg-grain,
.lightbrown-theme .bg-grain {
    opacity: .1;
}

@-webkit-keyframes noise {
    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

@keyframes noise {
    0% {
        transform: translate3d(0, 9rem, 0);
    }

    10% {
        transform: translate3d(-1rem, -4rem, 0);
    }

    20% {
        transform: translate3d(-8rem, 2rem, 0);
    }

    30% {
        transform: translate3d(9rem, -9rem, 0);
    }

    40% {
        transform: translate3d(-2rem, 7rem, 0);
    }

    50% {
        transform: translate3d(-9rem, -4rem, 0);
    }

    60% {
        transform: translate3d(2rem, 6rem, 0);
    }

    70% {
        transform: translate3d(7rem, -8rem, 0);
    }

    80% {
        transform: translate3d(-9rem, 1rem, 0);
    }

    90% {
        transform: translate3d(6rem, -5rem, 0);
    }

    to {
        transform: translate3d(-7rem, 0, 0);
    }
}

body,
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: calc(.58rem + (140vw - 2400px) / 400);
}

body {
    font-family: var(--serifType);
    font-weight: 400;
    font-size: 1.6rem;

    color: var(--theme-text);
    background-color: var(--theme-background);

    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

body .alt-theme {
    color: var(--theme-alt-text);
    background-color: var(--theme-alt-background);
}

body#index,
body#restaurant {
    overflow: hidden;
}

@media screen and (max-width: 1920px) {
    html {
        font-size: calc(.505rem + (140vw - 1920px) / 400);
    }
}

@media screen and (max-width: 1760px) {
    html {
        font-size: calc(.5225rem + (140vw - 1760px) / 400);
    }
}


@media screen and (max-width: 1200px) {
    html {
        font-size: calc(.45rem + (100vw - 1200px) / 400);
    }
}

@media screen and (max-width: 1080px) {
    html {
        font-size: calc(.45rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 900px) {
    html {
        font-size: calc(.5rem + (100vw - 1080px) / 400);
    }
}

@media screen and (max-width: 700px) {
    html {
        font-size: calc(.45rem + (100vw - 700px) / 400);
    }
}

@media screen and (max-width: 500px) {
    html {
        font-size: calc(.4rem + (100vw - 500px) / 400);
    }
}

@media screen and (max-width: 350px) {
    html {
        font-size: calc(.325rem + (100vw - 350px) / 400);
    }
}

/* TYPE PRESETS */
.heading.center,
.text.center {
    text-align: center;
}

.heading.left,
.text.left {
    text-align: start;
}

.heading.right,
.text.right {
    text-align: end;
}

.heading.ultra-light-wght,
.text.ultra-light-wght {
    font-variation-settings: var(--ultraLightWGHT);
}

.reveal.show .heading.ultra-light-wght,
.text.ultra-light-wght {
    font-variation-settings: var(--ultraLightWGHT) !important;
}

.heading.light-wght,
.text.light-wght {
    font-variation-settings: var(--lightWGHT);
}

.reveal.show .heading.light-wght,
.reveal.show .text.light-wght {
    font-variation-settings: var(--lightWGHT) !important;
}

.heading.regular-wght,
.text.regular-wght {
    font-variation-settings: var(--regularWGHT);
}

.reveal.show .heading.regular-wght,
.reveal.show .text.regular-wght {
    font-variation-settings: var(--regularWGHT) !important;
}

.heading.medium-wght,
.text.medium-wght {
    font-variation-settings: var(--mediumWGHT);
}

.reveal.show .heading.medium-wght,
.reveal.show .text.medium-wght {
    font-variation-settings: var(--mediumWGHT) !important;
}

.heading.bold-wght,
.text.bold-wght {
    font-variation-settings: var(--boldWGHT);
}

.reveal.show .heading.bold-wght,
.reveal.show .text.bold-wght {
    font-variation-settings: var(--boldWGHT) !important;
}

.heading.ultra-bold-wght,
.text.ultra-bold-wght {
    font-variation-settings: var(--ultraBoldWGHT);
}

.reveal.show .heading.ultra-bold-wght,
.reveal.show .text.ultra-bold-wght {
    font-variation-settings: var(--ultraBoldWGHT) !important;
}

/* HEADINGS */
.heading.huge {
    font-size: 12rem;
}

.heading.extra-large {
    font-size: 10.8rem;
}

.heading.large {
    font-size: 9rem;
}

.heading.medium {
    font-size: 7.2rem;
}

.heading.small {
    font-size: 5.4rem;
    letter-spacing: .05rem;
}

.heading.extra-small {
    font-size: 3.6rem;
    letter-spacing: .1rem;
}

.heading.tiny {
    font-size: 2.4rem;
    letter-spacing: .15rem;
}

@media screen and (max-width: 900px) {
    .heading.huge {
        font-size: 10.8rem;
    }

    .heading.extra-large {
        font-size: 9rem;
    }

    .heading.large {
        font-size: 7.2rem;
    }

    .heading.medium {
        font-size: 5.4rem;
        letter-spacing: .05rem;
    }

    .heading.small {
        font-size: 3.6rem;
        letter-spacing: .1rem;
    }

    .heading.extra-small {
        font-size: 2.4rem;
        letter-spacing: .15rem;
    }

    .heading.tiny {
        font-size: 2.4rem;
        letter-spacing: .2rem;
    }
}

@media screen and (max-width: 500px) {
    .heading.huge {
        font-size: 9rem;
    }

    .heading.extra-large {
/*        font-size: 8.4rem;*/
        font-size: 7.2rem;
    }
}

@media screen and (max-width: 350px) {
    .heading.extra-large {
        font-size: 7.2rem;
    }

    .heading.large {
        font-size: 7.2rem;
    }

    .heading.medium {
        font-size: 5.4rem;
        letter-spacing: .05rem;
    }

    .heading.small {
        font-size: 3.6rem;
        letter-spacing: .1rem;
    }

    .heading.extra-small {
        font-size: 3.2rem;
        letter-spacing: .15rem;
    }

    .heading.tiny {
        font-size: 3.2rem;
        letter-spacing: .2rem;
    }
}

/* BODY TEXT */
.text.huge {
    font-size: 5.4rem;
}

.text.extra-large {
    font-size: 4.8rem;
}

.text.large {
    font-size: 3.6rem;
}

.text.medium {
    font-size: 2.4rem;
}

.text.small {
    font-size: 1.8rem;
}

.text.extra-small {
    font-size: 1.4rem;
}

.text.tiny {
    font-size: .8rem;
}

.text {
    line-height: 1.3;
}

.text em,
.text strong,
.text u {
    transition: all 2s ease 0s;
    transition-property: font-variation-settings;
}

.text em {
    color: var(--theme-text-accent);
    font-variation-settings: var(--boldWGHT);
}

.reveal.show .text em {
    font-variation-settings: var(--boldWGHT) !important;
}

.text strong {
    font-variation-settings: var(--boldWGHT);
    font-size: 7rem;

    line-height: 1;

    display: block;
    padding: 4rem 0;
}

.reveal.show .text strong {
    font-variation-settings: var(--boldWGHT) !important;
}

.text strong u {
    font-variation-settings: var(--boldWGHT);
    text-decoration: none;
    font-size: 9.6rem;
}

.reveal.show strong u {
    font-variation-settings: var(--boldWGHT) !important;
}


.text strong em {
    font-variation-settings: var(--ultraBoldWGHT);
}

.reveal.show .text strong em {
    font-variation-settings: var(--ultraBoldWGHT) !important;
}

@media screen and (max-width: 900px) {
    .text.huge {
        font-size: 5.4rem;
    }

    .text.extra-large {
        font-size: 4.8rem;
    }

    .text.large {
        font-size: 3.6rem;
    }

    .text.medium {
        font-size: 3.2rem;
    }

    .text.small {
        font-size: 2.2rem;
    }

    .text.extra-small {
        font-size: 1.8rem;
    }

    .text.tiny {
        font-size: 1.4rem;
    }

    .text strong {
        font-size: 5.85rem;
    }

    .text strong u {
        font-size: 8rem;
    }
}

@media screen and (max-width: 350px) {
    .text.small {
        font-size: 2.4rem;
    }
}

/* PAGE WRAPPER */

.outer-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 16rem;
}

header {
    position: fixed;
    z-index: 100;
}

main {
    display: flex;
    flex-direction: column;
    gap: 10rem;

    padding: 0 var(--indent);

    transition: all 0.6s ease 0s;
    transition-property: filter;
}

@media screen and (max-width: 900px) {
    .outer-wrapper {
        gap: 10rem;
    }

    main {
        gap: 10rem;
    }
}

/* NAVIGATION */

header nav {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 100vh;
    height: calc(var(--vh) * 100);
    width: 100%;

    pointer-events: none;
    z-index: 100;

    transition: all 0.9s ease 0s;
    transition-property: backdrop-filter, -webkit-backdrop-filter;
}

header nav.menuOpen {
    -webkit-backdrop-filter: blur(1.6rem);
    backdrop-filter: blur(1.6rem);
}

header nav .divider-section {
    margin: 0 2rem;
    border-color: var(--theme-text);
    opacity: 0;
    pointer-events: none;

    transition: all 0.9s ease 0s;
    transition-property: opacity;
}

header nav.menuOpen .divider-section {
    opacity: .34;
}

header nav .shortcuts a,
header nav .shortcuts button {
    pointer-events: auto;
}

header nav .shortcuts {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}

header nav .internal-nav-section,
header nav .external-nav-section {
    padding: 2rem 2.5rem;
}

/* Top Navigation */
header nav .internal-nav-section {
    display: flex;
    flex-direction: column;
    gap: 5rem;

    position: relative;

    transition: all 0.9s ease 0s;
    transition-property: background-color, filter;
}

header nav .internal-nav-section::after {
    content: "";
    display: block;

    position: absolute;
    bottom: 0;

    transform: translate(calc(var(--indent) * -0.5), 2.4rem);

    transition: all 0.3s ease 0s;
    transition-property: background-color, transform;

    pointer-events: none;
}

header nav.menuOpen .internal-nav-section::after {
    background-color: var(--theme-background);
    width: 100vw;
    height: 2.5rem;

    clip-path: polygon(0.009% 82.127%, 0.009% 82.127%, 0.473% 79.299%, 0.984% 76.538%, 1.528% 73.91%, 2.09% 71.478%, 2.656% 69.305%, 3.209% 67.455%, 3.737% 65.991%, 4.222% 64.979%, 4.651% 64.48%, 5.009% 64.559%, 5.009% 64.559%, 5.302% 65.021%, 5.633% 65.693%, 5.991% 66.539%, 6.368% 67.523%, 6.754% 68.608%, 7.14% 69.756%, 7.515% 70.933%, 7.871% 72.1%, 8.198% 73.221%, 8.485% 74.26%, 8.485% 74.26%, 8.798% 75.199%, 9.154% 75.885%, 9.545% 76.356%, 9.959% 76.649%, 10.386% 76.799%, 10.815% 76.844%, 11.236% 76.821%, 11.637% 76.765%, 12.01% 76.714%, 12.342% 76.704%, 12.342% 76.704%, 12.627% 77.313%, 12.94% 78.899%, 13.274% 81.24%, 13.623% 84.112%, 13.98% 87.292%, 14.338% 90.557%, 14.691% 93.683%, 15.032% 96.448%, 15.353% 98.628%, 15.649% 100%, 15.649% 100%, 16.09% 101.04%, 16.573% 101.516%, 17.086% 101.523%, 17.618% 101.152%, 18.156% 100.496%, 18.689% 99.648%, 19.206% 98.699%, 19.693% 97.744%, 20.141% 96.873%, 20.536% 96.181%, 20.536% 96.181%, 21.224% 95.062%, 22.011% 93.62%, 22.872% 91.906%, 23.783% 89.974%, 24.718% 87.875%, 25.651% 85.661%, 26.559% 83.384%, 27.415% 81.098%, 28.194% 78.854%, 28.871% 76.704%, 28.871% 76.704%, 29.669% 74.752%, 30.391% 74.348%, 31.044% 75.217%, 31.637% 77.084%, 32.178% 79.673%, 32.677% 82.709%, 33.142% 85.917%, 33.581% 89.02%, 34.003% 91.744%, 34.417% 93.813%, 34.417% 93.813%, 35.237% 96.635%, 36.03% 98.51%, 36.794% 99.585%, 37.526% 100.007%, 38.224% 99.924%, 38.888% 99.483%, 39.515% 98.833%, 40.103% 98.12%, 40.651% 97.492%, 41.157% 97.098%, 41.157% 97.098%, 42.735% 95.867%, 43.983% 94.12%, 44.952% 92.024%, 45.694% 89.743%, 46.262% 87.445%, 46.707% 85.296%, 47.083% 83.462%, 47.441% 82.11%, 47.833% 81.406%, 48.311% 81.516%, 48.311% 81.516%, 48.621% 82.093%, 48.971% 83.16%, 49.353% 84.618%, 49.754% 86.366%, 50.166% 88.304%, 50.576% 90.331%, 50.975% 92.348%, 51.353% 94.252%, 51.697% 95.945%, 51.999% 97.326%, 51.999% 97.326%, 52.363% 98.546%, 52.733% 99.071%, 53.117% 98.945%, 53.523% 98.213%, 53.959% 96.916%, 54.432% 95.099%, 54.952% 92.806%, 55.526% 90.08%, 56.162% 86.964%, 56.867% 83.502%, 56.867% 83.502%, 57.981% 78.743%, 59.041% 75.409%, 60.037% 73.213%, 60.958% 71.866%, 61.794% 71.081%, 62.535% 70.567%, 63.17% 70.039%, 63.689% 69.206%, 64.081% 67.781%, 64.337% 65.476%, 64.337% 65.476%, 64.652% 61.316%, 64.946% 58.757%, 65.219% 57.49%, 65.471% 57.204%, 65.701% 57.59%, 65.91% 58.338%, 66.098% 59.138%, 66.265% 59.681%, 66.41% 59.657%, 66.533% 58.755%, 66.533% 58.755%, 66.879% 55.043%, 67.235% 52.544%, 67.594% 51.011%, 67.954% 50.2%, 68.31% 49.866%, 68.656% 49.763%, 68.989% 49.647%, 69.305% 49.272%, 69.597% 48.392%, 69.863% 46.763%, 69.863% 46.763%, 70.226% 44.367%, 70.57% 43.192%, 70.901% 42.981%, 71.223% 43.475%, 71.542% 44.415%, 71.862% 45.542%, 72.188% 46.6%, 72.524% 47.328%, 72.875% 47.469%, 73.246% 46.763%, 73.246% 46.763%, 74.479% 44.05%, 75.579% 43.904%, 76.559% 45.734%, 77.433% 48.949%, 78.216% 52.959%, 78.92% 57.173%, 79.561% 61.001%, 80.152% 63.85%, 80.708% 65.132%, 81.242% 64.254%, 81.242% 64.254%, 82.437% 60.477%, 83.644% 58.581%, 84.843% 58.215%, 86.011% 59.03%, 87.128% 60.674%, 88.174% 62.797%, 89.127% 65.048%, 89.967% 67.077%, 90.673% 68.533%, 91.223% 69.066%, 91.223% 69.066%, 91.679% 69.255%, 92.142% 69.812%, 92.608% 70.649%, 93.07% 71.68%, 93.525% 72.818%, 93.965% 73.977%, 94.387% 75.07%, 94.784% 76.01%, 95.152% 76.711%, 95.485% 77.086%, 95.485% 77.086%, 96.192% 77.47%, 96.819% 77.742%, 97.375% 77.954%, 97.868% 78.157%, 98.307% 78.404%, 98.701% 78.747%, 99.058% 79.239%, 99.388% 79.931%, 99.699% 80.876%, 100% 82.127%, 100% 0%, 0% 0%, 0% 82.127%, 0.009% 82.127%);
}

header nav.menuOpen .internal-nav-section {
    background-color: var(--theme-background);
    filter: drop-shadow(0 0 1.5rem #0000001A);
}

header nav .internal-nav-section .logo svg {
    fill: var(--theme-ui);

    height: 4rem;
    width: auto;

    transition: all 0.15s ease 0s;
    transition-property: transform, fill;
}

header nav .menu-btn .btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

header nav .menu-btn svg {
    fill: var(--theme-ui);

    height: 1.8rem;
    width: auto;

    transition: all 0.15s ease 0s;
    transition-property: transform, fill;
}

header nav .menu-btn path {
    --translate: 40%;
    transition: all 0.15s ease 0s;
    transition-property: transform, fill;
}

header nav .menu-btn .btn.pressed path:first-child {
    transform: translateY(var(--translate));
}

header nav .menu-btn .btn.pressed path:last-child {
    transform: translateY(calc(var(--translate) * -1));
}

@media (hover:hover) {

    header nav .internal-nav-section .logo:hover svg,
    header nav .menu-btn:hover svg {
        fill: var(--theme-ui-accent);
    }
}

@media screen and (max-width: 1200px) {
    header nav .internal-nav-section .logo svg {
        height: 6rem;
    }

    header nav .menu-btn svg {
        height: 2.75rem;
    }
}

/* NAVIGATION MENU */

header nav .nav-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5rem;

    padding: 0 2rem;

    opacity: 0;
    pointer-events: none;

    transition: all 0.3s ease 0s;
    transition-property: opacity;
}

header nav.menuOpen .nav-section {
    opacity: 1;
    pointer-events: auto;
}

header nav .nav-section .navigation {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    align-items: flex-start;
}

header nav .nav-section .nav-list {
    display: flex;
    flex-direction: column;
    gap: 2rem 4rem;
}

header nav .nav-section .nav-list .nav-item {
    font-size: 2.4rem;
    font-variation-settings: var(--mediumWGHT);

    transition: all 0.3s ease 0s;
    transition-delay: .3s, 0s;
    transition-property: opacity, font-variation-settings;
}

header nav .nav-section .nav-list .nav-item {
    font-size: 2.4rem;
    font-variation-settings: var(--mediumWGHT);

    width: 12.5ch;
    white-space: nowrap;

    opacity: 0;

    transition: all 0.3s ease 0s;
    transition-delay: .3s, 0s;
    transition-property: opacity, font-variation-settings;
}

header nav.menuOpen .nav-section .nav-list .nav-item {
    opacity: 1;
}

header nav .nav-section .nav-list .nav-item.disabled {
    text-decoration: line-through;
    text-decoration-thickness: var(--lineStroke);
    pointer-events: none;
}

header nav.menuOpen .nav-section .nav-list .nav-item.disabled {
    opacity: .34;
}

header nav .nav-section .nav-list .nav-item.disabled * {
    pointer-events: none;
}

header nav .nav-section .nav-list .nav-item .label {
    display: flex;
    flex-direction: row;
    gap: .25ch;
}

header nav .nav-section .nav-list .nav-item .label::before {
    content: "→ ";
    opacity: 0;
    margin-right: -1.15ch;

    transition: all 0.15s ease 0s;
    transition-property: opacity, margin;
}

@media (hover:hover) {
    header nav .nav-section .nav-list .nav-item:hover {
        font-variation-settings: var(--ultraBoldWGHT);
    }

    header nav .nav-section .nav-list .nav-item:hover a::before {
        opacity: 1;
        margin-right: 0ch;
    }
}

header nav .nav-section .lang-switch {}

header nav .nav-section .lang-switch .lang-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

header nav .nav-section .lang-switch .lang-item {
    font-size: 2rem;
    font-variation-settings: var(--mediumWGHT);

    display: flex;
    flex-direction: column;
    align-items: center;
}

header nav .nav-section .lang-switch .lang-item:nth-child(odd)::after {
    content: "•";
    padding: 1rem 0 0;
}

header nav .nav-section .lang-switch .lang-item.active {}

header nav .nav-contacts {
    display: flex;
    flex-direction: column;
    gap: 5rem 10rem;

    padding: 0 2rem;

    opacity: 0;
    pointer-events: none;

    transition: all 0.3s ease 0s;
    transition-property: opacity;
}

header nav.menuOpen .nav-contacts {
    opacity: 1;
    pointer-events: auto;
}

header nav .nav-contacts .contact-list {
    display: flex;
    flex-direction: row;
    gap: 2rem 5rem;
}

header nav .nav-contacts .contact-item {
    font-size: 1.4rem;
    font-variation-settings: var(--mediumWGHT);
    letter-spacing: .15rem;
    text-transform: uppercase;
    line-height: 1.6;

    display: flex;
    flex-direction: row;
    gap: 1rem;

    opacity: 0;

    transition: all 0.3s ease 0s;
    transition-delay: .3s, 0s;
    transition-property: opacity, font-variation-settings;
}

header nav.menuOpen .nav-contacts .contact-item {
    opacity: 1;
}

header nav .nav-contacts .contact-item a.label {
    transition: all 0.3s ease 0s;
    transition-property: font-variation-settings;
}

header nav .nav-contacts .contact-item a.label::before {
    content: "↘ ";
}

@media (hover:hover) {
    header nav .nav-contacts .contact-item a.label:hover {
        font-variation-settings: var(--ultraBoldWGHT);
    }
}

@media screen and (max-width: 700px) {

    header nav .internal-nav-section {
        gap: 2rem;
    }

    header nav .nav-section .navigation {
        flex-direction: column;
        gap: 2rem;
    }

    header nav .nav-section .nav-list .nav-item {
        font-size: 2.6rem;
    }

    header nav .nav-section .lang-switch .lang-item {
        font-size: 2.2rem;
    }

    header nav .nav-contacts .contact-list {
        flex-direction: row;
    }

    header nav .nav-contacts .contact-item {
        font-size: 1.3rem;
        flex-direction: column;
    }

    header nav .nav-contacts .contact-item .divider {
        display: none;
    }
}

/* Bottom Navigation */
header nav .external-nav-section {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 0;

    transition: all 0.3s ease 0s;
    transition-property: background-color;
}

header nav .external-nav-section::before {
    content: "";
    display: block;

    width: 100vw;
    height: 2rem;

    transform: translate(0, -1.9rem);

    clip-path: polygon(100% 32.534%, 100% 100%, 0% 100%, 0% 47.454%, 0% 47.454%, 0.859% 44.449%, 1.64% 41.782%, 2.35% 39.466%, 2.993% 37.512%, 3.578% 35.934%, 4.11% 34.743%, 4.595% 33.952%, 5.039% 33.574%, 5.45% 33.62%, 5.833% 34.104%, 5.833% 34.104%, 6.437% 35.041%, 7.028% 35.659%, 7.604% 36.013%, 8.161% 36.158%, 8.699% 36.148%, 9.213% 36.037%, 9.702% 35.88%, 10.164% 35.731%, 10.595% 35.644%, 10.993% 35.675%, 10.993% 35.675%, 11.151% 35.864%, 11.333% 36.297%, 11.53% 36.902%, 11.739% 37.605%, 11.954% 38.334%, 12.168% 39.016%, 12.376% 39.578%, 12.572% 39.947%, 12.751% 40.05%, 12.907% 39.815%, 12.907% 39.815%, 13.582% 38.091%, 14.263% 36.746%, 14.945% 35.739%, 15.619% 35.029%, 16.28% 34.577%, 16.921% 34.341%, 17.534% 34.281%, 18.114% 34.356%, 18.653% 34.524%, 19.145% 34.747%, 19.145% 34.747%, 20.313% 35.768%, 21.496% 37.4%, 22.682% 39.485%, 23.858% 41.868%, 25.012% 44.393%, 26.133% 46.903%, 27.209% 49.241%, 28.227% 51.252%, 29.176% 52.778%, 30.044% 53.664%, 30.044% 53.664%, 31.218% 54.291%, 32.512% 54.469%, 33.903% 54.09%, 35.367% 53.043%, 36.88% 51.22%, 38.418% 48.509%, 39.959% 44.803%, 41.478% 39.99%, 42.952% 33.962%, 44.358% 26.609%, 44.358% 26.609%, 44.945% 23.957%, 45.584% 22.394%, 46.271% 21.674%, 47.005% 21.554%, 47.781% 21.79%, 48.598% 22.137%, 49.451% 22.351%, 50.339% 22.188%, 51.257% 21.404%, 52.204% 19.755%, 52.204% 19.755%, 52.572% 19.28%, 53.162% 18.788%, 53.927% 18.331%, 54.82% 17.961%, 55.793% 17.73%, 56.801% 17.689%, 57.796% 17.891%, 58.731% 18.387%, 59.559% 19.229%, 60.233% 20.469%, 60.233% 20.469%, 60.942% 22.926%, 61.618% 26.196%, 62.3% 29.78%, 63.023% 33.18%, 63.825% 35.898%, 64.743% 37.436%, 65.812% 37.296%, 67.07% 34.98%, 68.554% 29.989%, 70.3% 21.825%, 70.3% 21.825%, 70.936% 19.218%, 71.833% 16.337%, 72.931% 13.332%, 74.171% 10.352%, 75.495% 7.548%, 76.843% 5.069%, 78.157% 3.066%, 79.379% 1.688%, 80.448% 1.086%, 81.307% 1.409%, 81.307% 1.409%, 81.915% 1.916%, 82.551% 1.889%, 83.204% 1.509%, 83.862% 0.955%, 84.514% 0.409%, 85.148% 0.052%, 85.753% 0.063%, 86.317% 0.625%, 86.828% 1.917%, 87.276% 4.121%, 87.276% 4.121%, 87.501% 6.248%, 87.691% 9.253%, 87.862% 12.957%, 88.029% 17.181%, 88.207% 21.745%, 88.411% 26.47%, 88.656% 31.175%, 88.957% 35.683%, 89.329% 39.812%, 89.788% 43.385%, 89.788% 43.385%, 90.448% 46.743%, 91.07% 48.048%, 91.698% 47.699%, 92.377% 46.097%, 93.151% 43.643%, 94.064% 40.738%, 95.161% 37.78%, 96.487% 35.172%, 98.085% 33.314%, 100% 32.605%);

    transition: all 0.3s ease 0s;
    transition-property: background-color;

    pointer-events: none;
}

header nav.menuOpen .external-nav-section::before {
    background-color: var(--theme-background);
}

header nav.menuOpen .external-nav-section {
    background-color: var(--theme-background);
    filter: drop-shadow(0 0 1.5rem #0000001A);
}

header nav .external-nav-section .cta-mobile {
    display: none;
}

header nav .external-nav-section .lang-list {
    display: flex;
    flex-direction: row;
    column-gap: 2rem;

    color: var(--theme-ui);
    font-variation-settings: var(--mediumWGHT);
    font-size: 2rem;
}

header nav .external-nav-section .logo svg {
    fill: var(--theme-ui);

    height: 3rem;
    width: auto;

    transition: all 0.15s ease 0s;
    transition-property: transform, fill;
}

header nav .socials-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

header nav .socials-item {
    --base-factor: 3rem;
}

header nav .socials-item svg {
    fill: var(--theme-ui);
    width: auto;

    transition: all 0.15s ease 0s;
    transition-property: transform, fill;
}


header nav .socials-item.square svg {
    height: var(--base-factor);
}

header nav .socials-item.horizontal svg {
    height: calc(var(--base-factor) * .8);
}

@media (hover:hover) {

    header nav .external-nav-section .logo:hover svg,
    header nav .socials-item:hover svg {
        fill: var(--theme-ui-accent);
    }

    header nav .external-nav-section .lang-list .lang-item a:hover {
        color: var(--theme-ui-accent);
    }
}

@media screen and (max-width: 1200px) {
    header nav .external-nav-section .logo svg {
        height: 4.5rem;
    }

    header nav .external-nav-section .lang-list {
        font-size: 3.2rem;
    }

    header nav .socials-list {
        gap: 3rem;
    }

    header nav .socials-item {
        --base-factor: 4.5rem;
    }
}

@media screen and (max-width: 700px) {
    header nav .external-nav-section {
        background-color: var(--theme-background);
        filter: drop-shadow(0 0 1.5rem #0000001A);
    }

    header nav .external-nav-section::before {
        background-color: var(--theme-background);
    }

    header nav .external-nav-section .logo {
        display: none;
    }

    header nav .external-nav-section .logo svg {
        height: 3.5rem;
    }

    header nav .external-nav-section .cta-mobile {
        display: flex;
    }

    header nav .external-nav-section .cta-mobile .cta-badge {
        background-color: var(--theme-ui);

        height: 3.5rem;
        width: auto;
        aspect-ratio: 15 / 2;

        animation: smallswing 8s cubic-bezier(.36, .07, .19, .97) both infinite;
        transition: all .3s ease 0s;
        transition-property: background-color, transform;
    }

    header nav .external-nav-section .lang-switch {
        display: none;
    }

    header nav .socials-list {
        gap: 3rem;
    }

    header nav .socials-item {
        --base-factor: 3.5rem;
    }
}

/* BACKGROUND TREE RING PATTERN */

.bg-pattern-wrapper,
.bg-pattern-wrapper * {
    overflow: hidden;
    pointer-events: none;
}

.bg-pattern-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    min-width: calc(100vh + 100rem);
    aspect-ratio: 1 / 1;
    margin: 0 50%;

    position: absolute;
    top: 0;

    transform: translate(-50%, 25%) scale(1.5);
    z-index: -1;
}

.bg-pattern {
    fill: none;
    width: 100%;
}

.bg-pattern path {
    stroke: var(--theme-background-accent);
    stroke-width: 1px;
    transform-origin: center;
    animation: spin 60s linear infinite;
}

.brown-theme .bg-pattern path,
.lightbrown-theme .bg-pattern path,
.beige-theme .bg-pattern path {
    opacity: .4;
}

.green-theme .bg-pattern path,
.lightgreen-theme .bg-pattern path {
    opacity: .6;
}

/* MAIN LANDING MENU */

.main-menu {
    display: block;
    position: fixed;
    bottom: -5vh;
    bottom: calc(var(--vh) * -5);

    height: 100vh;
    height: calc(var(--vh) * 100);
    width: auto;
    max-width: calc(100vw - var(--indent)* 2);

    will-change: transform;
}

.main-menu g:has(.menu-ilustration) {
    height: 100%;
    width: 100%;
}

.main-menu .menu-illustration {
    fill: var(--theme-graphics-background);

    height: 100vh;
    height: calc(var(--vh) * 100);
    width: auto;
    max-width: calc(100vw - var(--indent)* 2);
}

.main-menu * {
    user-select: none;
}

.main-menu .menu-item {
    font-size: 22px;
    fill: var(--theme-graphics-text);

    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;

    transform-origin: center center;
    transform-box: fill-box;
    transform-origin: center;

    dominant-baseline: middle;
    text-anchor: middle;

    will-change: transform;

    transition: all .3s ease 0s;
    transition-property: font-variation-settings, letter-spacing, color;
}

.main-menu .disabled {
    opacity: .28;
    pointer-events: none;
}

@media (hover:hover) {
    .main-menu .menu-item:hover {
        font-variation-settings: var(--ultraBoldWGHT);
        letter-spacing: .1rem;
        color: var(--theme-alt-text);
    }
}

@media screen and (max-width: 700px) {
    .main-menu {
        position: fixed;
        bottom: -8vh;

        height: 100vh;
        height: calc(var(--vh) * 100);
        width: auto;
        max-width: calc(100vw - var(--indent)* 1);
    }
}

@media screen and (max-width: 450px) {
    .main-menu g a {
        --shift: .75rem;
        transform: translate(var(--shift), var(--shift));
    }
}

text[alignment-baseline="before-edge"] {
    dominant-baseline: text-before-edge;
}

text[alignment-baseline="central"] {
    dominant-baseline: central;
}

/* ILLUSTRATIONS */

.hero-illustration {
    display: block;
    flex-grow: 1;

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;
}

.hero-illustration.landscape {
    top: 65%;
}

.hero-illustration.portrait {
    display: none;
    top: 50%;
}

.hero-illustration svg {
    fill: var(--theme-graphics-background);
    height: 100vh;
    height: calc(var(--vh) * 100);
    width: 100vw;
}

@media screen and (max-aspect-ratio: 1 / 1) {
    .hero-illustration.landscape {
        display: none;
    }

    .hero-illustration.portrait {
        display: block;
    }

    .hero-illustration.portrait svg {
        height: 90vh;
        height: calc(var(--vh) * 90);
        width: calc(100vw - var(--indent) * 2);
    }
}

.graphic-illustration {
    background-color: var(--theme-graphics);

    height: auto;
    width: 25%;
    aspect-ratio: 1 / 1;

    flex-grow: 1;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* BADGES */

.badge {
    position: absolute;

    background-color: var(--theme-ui-accent);

    height: auto;
    width: 22.5rem;
    aspect-ratio: 1 / 1;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    user-select: none;
    pointer-events: none;
}

.page-badge {
    position: fixed;
    z-index: 80;
}

#index .page-badge {
    background-color: var(--theme-graphics-text);

    top: 8vh;
    left: 12vw;
    transform: rotate(-15deg);
    animation: spin 12s cubic-bezier(.36, .07, .19, .97) both infinite;
}

/* SECTIONS  */

.section {
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: relative;

    scroll-margin-top: 10rem;
    ;
}

.section > * {
    flex-basis: 100%;
}

.section > .wide {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    gap: 0;
}

.section.columns {
    flex-direction: row;
    gap: 10rem;
}

.section.columns > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
    gap: 5rem;
    margin: 0 auto;

    position: relative;
}

.indent.small {
    margin: 0 calc(var(--indent) / 2);
}

.alt-theme .indent.small {
    margin: 0 calc(var(--indent) / 1);
}

.indent.large {
    margin: 0 calc(var(--indent) * 2);
}

.indent.huge {
    margin: 0 calc(var(--indent) * 6);
}

.alt-theme .indent.large {
    margin: 0 calc(var(--indent) * 3);
}

.divider-section {
    opacity: .34;
    border-bottom: solid var(--lineStroke) var(--theme-background-accent);
}

.pink-theme main .divider-section {
    opacity: 1;
}

.alt-theme .divider-section {
    border-color: var(--theme-alt-background-accent);
}

@media screen and (max-width: 900px) {
    .section.columns {
        flex-direction: column;
        gap: 5rem;
    }

    .section.columns > * {
        flex-direction: column;
        flex-basis: 100%;
    }

    .indent.large {
        margin: 0 calc(var(--indent) / 2);
    }
}

/* HERO HEADLINE SECTIONS */

.hero-headline-section {
    --height;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;

    margin: calc((var(--vh) * 100 - var(--height)) / 2) auto;
}

.hero-headline-section .page-name-wrapper {
    display: flex;
}

.hero-headline-section .page-name-wrapper .page-name {
    text-align: center;
    text-transform: uppercase;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;

    z-index: 10;
}

.hero-headline-section .page-name-wrapper .page-name::after {
    content: "";
    display: block;

    background-color: var(--theme-text);

    height: var(--lineStroke);
    width: 3ch;
}

.hero-headline-section .hero-headline-wrapper {
    display: flex;
}

.hero-headline-section .hero-headline {
    z-index: 10;
}

#garden-and-bar .hero-headline-section .hero-headline-wrapper .hero-headline {
    max-width: 10.5ch;
}

#restaurant .hero-headline-section .hero-headline-wrapper .hero-headline {
    max-width: 13ch;
}

#reservations .hero-headline-section .hero-headline-wrapper .hero-headline {
    max-width: 11.25ch;
}

#restaurant-menu .hero-headline-section .hero-headline-wrapper .hero-headline {
    max-width: 10ch;
}

#bar-menu .hero-headline-section .hero-headline-wrapper .hero-headline {
    max-width: 9ch;
}

#wine-list .hero-headline-section .hero-headline-wrapper .hero-headline {
    max-width: 6ch;
}

@media screen and (max-width: 700px) {
    .hero-headline-section {
        margin: calc(var(--vh) * 50 - 22rem) auto;
    }

    .lightgreen-theme .hero-headline-section .hero-headline-wrapper .hero-headline {
        max-width: 7.5ch;
    }

    .lightpink-theme .hero-headline-section .hero-headline-wrapper .hero-headline {
        max-width: 13ch;
    }

    .beige-theme .hero-headline-section .hero-headline-wrapper .hero-headline {
        max-width: 11.25ch;
    }
}

/* HEADLINE SECTION */

.headline-section {
    margin: calc(var(--vh) * 25) auto 0
}

/* STD TEXT SECTION */

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

.std-content-section > * {
    width: 100%;
}

.std-content-section .text h2 {
    font-variation-settings: var(--boldWGHT);
    font-size: 4.8rem;
    line-height: 1;
    padding-bottom: 4rem;
}

.std-content-section .text ol,
.std-content-section .text ul {
    text-indent: 4rem;
}

.std-content-section .text ol li::before,
.std-content-section .text ul li::before {
    content: "→ ";
    padding-right: 2rem;
}

.std-content-section .text p {
    padding-bottom: 2rem;
}

/* INTRO SECTIONS */

.intro-section {}

.intro-section .intro-image img {
    aspect-ratio: 5 / 4;
}

.intro-section .intro-text-wrapper {}

/* IMAGE BANNERS */

.image-wrapper .image img {
    border-radius: var(--corner);

    object-fit: cover;
    height: auto;
    width: 100%;
}

.banner-section .banner-image {}

.banner-section .banner-image img {
    aspect-ratio: 20 / 9;
}

@media screen and (max-width: 900px) {
    .banner-section .banner-image img {
        aspect-ratio: 16 / 9;
    }
}

@media screen and (max-width: 700px) {
    .banner-section .banner-image img {
        aspect-ratio: 4 / 5;
    }
}

/* SINGLE IMAGE */

.image-wrapper {}

.image-wrapper .image {
    flex-shrink: 0;
}

.image-wrapper .image img {
    display: table;
    width: auto;
    pointer-events: none;
}

.image-wrapper .image.landscape img {
    height: 50rem;
    aspect-ratio: 5 / 4;
}

.image-wrapper .image.portrait img {
    height: 60rem;
    aspect-ratio: 4 / 5;
}

.image-wrapper .image.square img {
    height: 55rem;
    aspect-ratio: 1 / 1;
}

/* IMAGE CAROUSELS */

.carousel-section {
    width: calc(100% + var(--indent) * 2);
    transform: translateX(calc(var(--indent)* -1));
    overflow: hidden;
}

.carousel-section .carousel-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4rem;
    padding: 0 var(--indent);

    position: relative;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    direction: ltr;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
}

.carousel-section .animation-wrapper {
    --thumbNumb: 10;
    --timeCalc: calc(var(--thumbNumb) * 2.5s);
    --gap: 2rem;
    --width: 10rem;

    will-change: transform;

    display: flex;
    flex-direction: row;
    gap: var(--gap);

    -webkit-animation: thumbScroll calc(var(--timeCalc)) linear infinite;
    animation: thumbScroll calc(var(--timeCalc)) linear infinite;
}

@-webkit-keyframes thumbScroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-1 * var(--width) * var(--thumbNumb) - var(--gap) * var(--thumbNumb)));
        transform: translateX(calc(-1 * var(--width) * var(--thumbNumb) - var(--gap) * var(--thumbNumb)));
    }
}

@keyframes thumbScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--width) * var(--thumbNumb) - var(--gap) * var(--thumbNumb)));
    }
}


.carousel-section .carousel-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.carousel-section .carousel-item.disabled {
    opacity: .34;
    pointer-events: none;
}

.carousel-section .carousel-wrapper .image {
    flex-shrink: 0;
}

.carousel-section .carousel-wrapper .image img {
    display: table;
    width: auto;
    pointer-events: none;
}

.carousel-section .carousel-wrapper .image.landscape img {
    height: 50rem;
    aspect-ratio: 5 / 4;
}

.carousel-section .carousel-wrapper .image.portrait img {
    height: 60rem;
    aspect-ratio: 4 / 5;
}

@media screen and (max-width: 700px) {
    .carousel-section .animation-wrapper {
        --timeCalc: calc(var(--thumbNumb) * 3s);
    }

    .carousel-section .carousel-wrapper .image.landscape img {
        height: 40rem;
    }

    .carousel-section .carousel-wrapper .image.portrait img {
        height: 50rem;
    }
}

/* IMAGE CARDS */

.img-card-section {}

.img-card-section .list-wrapper {
    --nColumns: 3;
    --gap: 2rem;
    --cardWidth: calc( ( 100vw - var(--indent) * 2 - ( var(--gap) * ( var(--nColumns) - 1 ) ) ) / var(--nColumns) );
    
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10rem var(--gap);

    width: 100%;
}

.img-card-section .list-wrapper .list-item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.img-card-section .list-wrapper .list-item img {
    width: var(--cardWidth);
    height: auto;
}

.img-card-section .list-wrapper .list-item figcaption > *,
.img-card-section .list-wrapper .list-item .label {
    width: var(--cardWidth);
}

.img-card-section .list-wrapper .list-item .label {
    text-transform: uppercase;
}


/* CTAs */

.cta-wrapper {}

.cta-wrapper .cta {
    display: flex;
    position: absolute;
    z-index: 1;
}

.cta-wrapper.float {
    position: fixed;
    bottom: calc(var(--vh)* 6);
    right: 4rem;

    transition: all .9s ease 0s;
    transition-duration: .15s, .15s, .9s;
    transition-property: bottom, right, opacity;
}

.cta-wrapper.float .cta {
    position: relative;
    transition: all .9s ease 0s;
    transition-property: opacity;
}

@media screen and (max-width: 700px) {
    .cta-wrapper.float {
        display: none;
    }

    .cta-wrapper.float .cta {
        position: fixed;
        bottom: calc(var(--vh)* 10);
        right: 2rem;
    }
}

.cta-wrapper .graphic-illustration {
    width: 40rem;
    opacity: .25;

    transition: all .3s ease 0s;
    transition-property: transform;
}

.cta-wrapper .cta-link {
    font-variation-settings: var(--boldWGHT);
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: .1rem;
    color: var(--theme-btn-text);
    background-color: var(--theme-btn-background);
    padding: 2.5rem 3rem;
    border-radius: var(--corner);

    transition: all .15s ease 0s;
    transition-property: color, background-color;
}

.cta-wrapper .cta-badge {
    background-color: var(--theme-ui-accent);
    display: flex;
    flex-basis: 100%;

    width: 35rem;
    aspect-ratio: 1 / 1;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    user-select: none;
    pointer-events: none;

    animation: swing 5s cubic-bezier(.36, .07, .19, .97) both infinite;

    transition: all .3s ease 0s;
    transition-property: background-color, transform;
}

.cta-wrapper.float .cta-badge {
    background-color: var(--theme-graphics-text);
    width: 20rem;

    transform-origin: center;
    animation: none;
    animation: swing 3s cubic-bezier(.36, .07, .19, .97) both infinite;
}

@media (hover:hover) {
    .cta-wrapper:hover .graphic-illustration {
        transform: scale(1.1);
    }

    .cta-wrapper .cta-link:hover {
        color: var(--theme-btn-background);
        background-color: var(--theme-btn-text);
    }

    .cta-wrapper .cta-badge-link:hover .cta-badge {
        animation-play-state: paused;
        background-color: var(--theme-ui);
        transform: rotate(2.5deg) scale(1.1);
    }
}

/* BOOKING SECTION */

.booking-wrapper {}

.booking-wrapper iframe {
    width: 100%;
}

@media screen and (max-width: 900px) {
    #reservations .intro-text-wrapper {
        display: none;
        order: 2;
    }

    #reservations .booking-wrapper {
        order: 1;
    }
}

/* MENU PAGES */

/* MENU FILTERS */

.menu-tag-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.menu-tag-section .label-wrapper {}

.menu-tag-section .label-wrapper .label {
    text-transform: uppercase;
}

.menu-tag-section .tag-list-wrapper {}

.menu-tag-section .tag-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
}


.menu-tag-section .tag-list-item {}

.menu-tag-section .tag-btn-wrapper {
    text-align: center;

    padding: .75rem 2.5rem .55rem;
    border: solid var(--lineStroke) var(--theme-background-accent);
    border-radius: 4rem;
}

.menu-tag-section .tag-btn-wrapper .label {}

/* MENU SECTIONS */

.menu-sections-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16rem 0;
}

.partial-menu-section {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 2rem;
    width: 100%;
}

.partial-menu-section .section-list-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;

    width: 100%;
}

.partial-menu-section .item-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
}

.partial-menu-section .item-info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    width: 65%;
}

.partial-menu-section .item-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
}

/* MENU MASONRY GRID */

.menu-sections-wrapper.grid {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

/* 3 columns at very large size */
.menu-sections-wrapper .grid-col {
    display: flex;
    flex-direction: column;
    gap: 12rem;

    width: calc(33% - 12rem);
    margin: 0 auto;

    box-sizing: border-box;
}

.menu-sections-wrapper .grid-col > .section:first-child .menu-headline {
    min-height: 2lh;
}


.menu-sections-wrapper .grid-item {
    height: auto;
}

/* 2 columns at large size */
@media screen and (max-width: 1900px) {
    .menu-sections-wrapper .grid-col {
        width: calc(50% - 12rem);
    }

    .menu-sections-wrapper .grid-col:nth-child(3) {
        display: none;
    }

    .menu-sections-wrapper .grid-col > .section:first-child .menu-headline {
        min-height: 2lh;
        font-size: 6rem;
    }
}

@media screen and (max-width: 1200px) {
    .menu-sections-wrapper .grid-col {
        width: calc(50% - 12rem);
    }
}

/* 1 columns at medium size */
@media screen and (max-width: 1080px) {
    .menu-sections-wrapper .grid-col {
        width: calc(100% - 12rem);
    }

    .menu-sections-wrapper .grid-col:nth-child(2) {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .menu-sections-wrapper .grid-col {
        width: calc(100% - 6rem);
    }
}

/* CONTACTS PAGE */

#contacts .contacts-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
}

#contacts .schedule-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}


/* ALT AREA */

.alt-theme {
    display: flex;
    flex-direction: column;
    gap: 12rem;
}

.alt-theme::before,
.alt-theme::after {
    content: "";
    display: block;

    pointer-events: none;
    background-color: var(--theme-alt-background);
    width: 100vw;
    height: 2rem;
}

.alt-theme::before {
    transform: translate(calc(var(--indent) * 0), -1.9rem);
    clip-path: polygon(0% 50.223%, 0% 50.223%, 0.28% 46.138%, 0.623% 42.259%, 1.019% 38.626%, 1.454% 35.281%, 1.918% 32.264%, 2.399% 29.616%, 2.884% 27.378%, 3.363% 25.592%, 3.824% 24.298%, 4.254% 23.538%, 4.254% 23.538%, 4.677% 22.943%, 5.105% 22.631%, 5.536% 22.568%, 5.97% 22.721%, 6.407% 23.057%, 6.846% 23.543%, 7.287% 24.144%, 7.728% 24.829%, 8.17% 25.563%, 8.611% 26.313%, 8.611% 26.313%, 9.54% 27.982%, 10.466% 30.015%, 11.39% 32.339%, 12.313% 34.88%, 13.235% 37.565%, 14.157% 40.321%, 15.079% 43.073%, 16.002% 45.749%, 16.925% 48.276%, 17.85% 50.579%, 17.85% 50.579%, 18.841% 52.552%, 19.831% 54.002%, 20.821% 54.953%, 21.811% 55.424%, 22.801% 55.44%, 23.789% 55.021%, 24.778% 54.189%, 25.765% 52.967%, 26.751% 51.377%, 27.737% 49.44%, 27.737% 49.44%, 29.224% 45.735%, 30.701% 40.846%, 32.171% 35.116%, 33.636% 28.888%, 35.1% 22.506%, 36.565% 16.311%, 38.033% 10.647%, 39.509% 5.857%, 40.994% 2.283%, 42.491% 0.268%, 42.491% 0.268%, 42.941% 0.045%, 43.39% 0.008%, 43.839% 0.143%, 44.287% 0.439%, 44.735% 0.882%, 45.182% 1.459%, 45.63% 2.158%, 46.077% 2.966%, 46.524% 3.871%, 46.971% 4.858%, 46.971% 4.858%, 47.52% 6.15%, 48.069% 7.451%, 48.618% 8.745%, 49.168% 10.012%, 49.717% 11.236%, 50.268% 12.397%, 50.818% 13.479%, 51.37% 14.463%, 51.922% 15.331%, 52.474% 16.066%, 52.474% 16.066%, 53.151% 16.863%, 53.829% 17.583%, 54.506% 18.25%, 55.183% 18.887%, 55.86% 19.517%, 56.537% 20.165%, 57.214% 20.853%, 57.89% 21.605%, 58.566% 22.445%, 59.242% 23.395%, 59.242% 23.395%, 60.147% 24.675%, 61.054% 26.197%, 61.963% 27.942%, 62.873% 29.892%, 63.783% 32.028%, 64.692% 34.332%, 65.601% 36.784%, 66.507% 39.367%, 67.412% 42.062%, 68.313% 44.85%, 68.313% 44.85%, 69.514% 48.351%, 70.719% 51.135%, 71.926% 53.217%, 73.136% 54.615%, 74.347% 55.342%, 75.558% 55.415%, 76.768% 54.849%, 77.977% 53.661%, 79.184% 51.864%, 80.388% 49.476%, 80.388% 49.476%, 81.343% 47.28%, 82.295% 44.551%, 83.245% 41.371%, 84.191% 37.827%, 85.135% 34.003%, 86.075% 29.983%, 87.012% 25.853%, 87.945% 21.697%, 88.874% 17.6%, 89.799% 13.646%, 89.799% 13.646%, 90.561% 10.758%, 91.293% 8.428%, 92% 6.745%, 92.691% 5.796%, 93.371% 5.669%, 94.047% 6.453%, 94.726% 8.236%, 95.415% 11.105%, 96.12% 15.148%, 96.848% 20.455%, 96.848% 20.455%, 97.21% 23.301%, 97.584% 26.69%, 97.961% 30.546%, 98.333% 34.796%, 98.692% 39.366%, 99.03% 44.182%, 99.338% 49.169%, 99.608% 54.254%, 99.831% 59.362%, 100% 64.42%, 100% 100%, 0% 100%, 0% 50.294%, 0% 50.223%);
}

.alt-theme::after {
    transform: translate(calc(var(--indent) * 0), 1.9rem);
    clip-path: polygon(100% 49.911%, 100% 49.911%, 99.72% 54.007%, 99.377% 57.896%, 98.981% 61.539%, 98.546% 64.893%, 98.082% 67.919%, 97.601% 70.573%, 97.116% 72.817%, 96.637% 74.608%, 96.176% 75.905%, 95.746% 76.668%, 95.746% 76.668%, 95.323% 77.264%, 94.895% 77.577%, 94.464% 77.64%, 94.03% 77.487%, 93.593% 77.15%, 93.154% 76.663%, 92.713% 76.06%, 92.272% 75.373%, 91.83% 74.638%, 91.389% 73.885%, 91.389% 73.885%, 90.46% 72.212%, 89.534% 70.173%, 88.61% 67.843%, 87.687% 65.295%, 86.765% 62.603%, 85.843% 59.84%, 84.921% 57.08%, 83.998% 54.396%, 83.075% 51.863%, 82.15% 49.554%, 82.15% 49.554%, 81.159% 47.576%, 80.169% 46.121%, 79.179% 45.168%, 78.189% 44.695%, 77.199% 44.68%, 76.211% 45.1%, 75.223% 45.934%, 74.235% 47.159%, 73.249% 48.754%, 72.264% 50.696%, 72.264% 50.696%, 70.776% 54.411%, 69.299% 59.313%, 67.829% 65.058%, 66.364% 71.303%, 64.9% 77.702%, 63.436% 83.914%, 61.967% 89.593%, 60.491% 94.396%, 59.006% 97.98%, 57.509% 100%, 57.509% 100%, 57.059% 100.224%, 56.61% 100.261%, 56.161% 100.125%, 55.713% 99.829%, 55.265% 99.385%, 54.818% 98.806%, 54.37% 98.105%, 53.923% 97.295%, 53.476% 96.388%, 53.029% 95.398%, 53.029% 95.398%, 52.48% 94.103%, 51.931% 92.798%, 51.382% 91.501%, 50.832% 90.23%, 50.283% 89.003%, 49.732% 87.838%, 49.182% 86.754%, 48.63% 85.767%, 48.078% 84.896%, 47.526% 84.16%, 47.526% 84.16%, 46.849% 83.361%, 46.171% 82.639%, 45.494% 81.97%, 44.817% 81.332%, 44.14% 80.699%, 43.463% 80.05%, 42.786% 79.36%, 42.11% 78.606%, 41.434% 77.764%, 40.758% 76.811%, 40.758% 76.811%, 39.853% 75.527%, 38.946% 74.001%, 38.037% 72.251%, 37.127% 70.296%, 36.217% 68.155%, 35.308% 65.845%, 34.399% 63.386%, 33.493% 60.796%, 32.588% 58.094%, 31.687% 55.298%, 31.687% 55.298%, 30.486% 51.788%, 29.281% 48.997%, 28.074% 46.908%, 26.864% 45.507%, 25.653% 44.778%, 24.442% 44.705%, 23.232% 45.272%, 22.023% 46.464%, 20.816% 48.265%, 19.612% 50.66%, 19.612% 50.66%, 18.658% 52.861%, 17.705% 55.599%, 16.756% 58.786%, 15.809% 62.34%, 14.865% 66.175%, 13.925% 70.205%, 12.988% 74.346%, 12.055% 78.514%, 11.126% 82.622%, 10.201% 86.586%, 10.201% 86.586%, 9.452% 89.712%, 8.756% 92.676%, 8.099% 95.297%, 7.467% 97.394%, 6.848% 98.786%, 6.228% 99.292%, 5.593% 98.731%, 4.931% 96.922%, 4.228% 93.683%, 3.47% 88.834%, 3.47% 88.834%, 3.097% 85.887%, 2.691% 82.213%, 2.269% 77.887%, 1.843% 72.984%, 1.428% 67.58%, 1.037% 61.749%, 0.685% 55.569%, 0.385% 49.113%, 0.152% 42.457%, 0% 35.676%, 0% 0%, 100% 0%, 100% 49.84%, 100% 49.911%);


}

.alt-theme .heading {
    color: var(--theme-alt-text-accent);
}

.alt-theme .carousel-section {}

@media screen and (max-width: 700px) {
    .alt-theme {
        gap: 6rem;
    }
}

/* CARD ARRAY */

.suggestion-cards-section {
    display: flex;
    flex-direction: column;
}

.suggestion-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14rem;

    flex-basis: 100%;
}

.suggestion-cards-heading {}

.suggestion-cards .card-list {}

.suggestion-cards .card {
    --cardSize: 35rem;
}

.suggestion-cards .card a {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    width: var(--cardSize);
}

.suggestion-cards .card-image-wrapper {
    display: table;

    background-color: var(--theme-alt-ui);
    border-radius: var(--corner);

    height: var(--cardSize);
    width: auto;
    aspect-ratio: 1 / 1;

    pointer-events: none;
}

.suggestion-cards .card-image {
    background-color: var(--theme-alt-ui-accent);

    display: flex;
    flex-basis: 100%;
    aspect-ratio: 1 / 1;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    user-select: none;
    pointer-events: none;

    transition: all .3s ease 0s;
    transition-property: background-color, transform;
}

.suggestion-cards .card-desc-wrapper {
    display: flex;
    flex-basis: 100%;
}

.suggestion-cards .card-desc {
    line-height: 1.5;
    white-space: normal;
}

.alt-theme .suggestion-cards .card-desc {
    color: var(--theme-alt-text-accent);

    transition: all .3s ease 0s;
    transition-property: font-variation-settings, letter-spacing, color;
}

@media (hover:hover) {
    .suggestion-cards .card a:hover .card-image {
        background-color: var(--theme-alt-text);
        transform: scale(1.05);
    }

    .suggestion-cards .card a:hover .card-desc {
        font-variation-settings: var(--ultraBoldWGHT);
        letter-spacing: .1rem;
        color: var(--theme-alt-text);
    }
}

@media screen and (max-width: 900px) {
    .suggestion-cards .card-desc {
        line-height: 1.3;
    }
}

@media screen and (max-width: 700px) {
    .suggestion-cards-wrapper {
        gap: 8rem;
    }
}

/* NEWSLETTER SECTION */

.newsletter-heading-wrapper {
    display: flex;
    justify-content: flex-start !important;
}

.newsletter-heading .heading {}

/* PAGE FORMS */

.form-wrapper {
    display: flex;
    align-items: flex-start !important;
    width: 100%;
}

.form {
    width: 100%;
}

.form .form-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    position: relative;
}

.form .field {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    position: relative;
}

.form .input,
.form .btn {
    font-family: var(--serifType);
    text-transform: uppercase;
    display: flex;
    flex-basis: 100%;
    width: 100%;
    justify-content: space-between;
    gap: 3rem;

    background-color: var(--theme-btn-background);
    color: var(--theme-btn-text);

    padding: 1.5rem 3rem;

    border: solid var(--lineStroke) var(--theme-btn-background);
    border-radius: var(--corner);
    background-image: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    position: relative;
}

.alt-theme .form .input,
.alt-theme .form .btn {
    background-color: var(--theme-alt-btn-background);
    color: var(--theme-alt-btn-text);

    border-color: var(--theme-alt-btn-background);
}

.form .field .input::placeholder {
    font-family: var(--serifType);
    text-transform: uppercase;
    font-variation-settings: var(--wght-medium);
    color: var(--theme-btn-text);
}

.form .field .input::-ms-input-placeholder {
    font-family: var(--serifType);
    text-transform: uppercase;
    font-variation-settings: var(--wght-medium);
    color: var(--theme-btn-text);
}

.alt-theme .form .field .input::placeholder {
    color: var(--theme-alt-btn-text);
}

.alt-theme .form .field .input::-ms-input-placeholder {
    color: var(--theme-alt-btn-text);
}

input:-internal-autofill-selected {
    appearance: unset;
    background-image: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

.form .field .input:focus {
    color: var(--theme-btn-text);
    text-transform: none;
    outline: none !important;
    box-shadow: none;
}

.alt-theme .form .field .input:focus {
    color: var(--theme-alt-btn-text);
}


.form .input.center,
.form .btn.center {
    justify-content: center;
}

.form .btn {
    background-color: var(--theme-btn-background);
    color: var(--theme-btn-text);

    cursor: pointer;
}

.alt-theme .form .btn {
    background-color: var(--theme-alt-btn-background);
    color: var(--theme-alt-btn-text);
}

@media (hover:hover) {
    .form .btn:hover {
        background-color: var(--theme-btn-text);
        color: var(--theme-btn-background);
        border-color: var(--theme-btn-background);
    }

    .alt-theme .form .btn:hover {
        background-color: var(--theme-alt-btn-text);
        color: var(--theme-alt-btn-background);
        border-color: var(--theme-alt-btn-background);
    }
}

@media screen and (max-width: 700px) {
    .form .form-inputs {
        gap: 2rem;
    }

    .form .field {
        flex-direction: column;
    }

    .form .field:not(:last-child)::after {
        content: "";
        display: block;
        position: relative;
        height: var(--lineStroke);
        width: 100%;
        margin-top: 1rem;
        background-color: var(--theme-alt-text);
        opacity: .34;
    }
}

/* FOOTER */

footer .footer-nav-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5rem;

    padding-bottom: 10rem;
}

footer .divider-section {
    margin: 0 var(--indent);
    border-color: var(--theme-text);
    opacity: .34;
    pointer-events: none;

    transition: all 0.3s ease 0s;
    transition-property: opacity;
}

footer .footer-nav-section .nav-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5rem;

    padding: 0 var(--indent);

    transition: all 0.3s ease 0s;
    transition-property: opacity;
}

footer .footer-nav-section .nav-section .navigation {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    align-items: flex-start;
}

footer .footer-nav-section .nav-section .nav-list {
    display: flex;
    flex-direction: column;
    gap: 2rem 4rem;
}

footer .footer-nav-section .nav-section .nav-list .nav-item {
    font-size: 2.4rem;
    font-variation-settings: var(--mediumWGHT);

    transition: all 0.3s ease 0s;
    transition-delay: .3s, 0s;
    transition-property: opacity, font-variation-settings;
}

footer .footer-nav-section .nav-section .nav-list .nav-item.disabled {
    text-decoration: line-through;
    text-decoration-thickness: var(--lineStroke);
    pointer-events: none;
}

footer .footer-nav-section .nav-section .nav-list .nav-item.disabled {
    opacity: .34;
}

footer .footer-nav-section .nav-section .nav-list .nav-item.disabled * {
    pointer-events: none;
}

footer .footer-nav-section .nav-section .nav-list .nav-item .label {
    display: flex;
    flex-direction: row;
    gap: .25ch;
}

footer .footer-nav-section .nav-section .nav-list .nav-item .label::before {
    content: "→ ";
    opacity: 0;
    margin-right: -1.15ch;

    transition: all 0.15s ease 0s;
    transition-property: opacity, margin;
}

@media (hover:hover) {
    footer .footer-nav-section .nav-section .nav-list .nav-item:hover {
        font-variation-settings: var(--ultraBoldWGHT);
    }

    footer .footer-nav-section .nav-section .nav-list .nav-item:hover a::before {
        opacity: 1;
        margin-right: 0ch;
    }
}

footer .footer-nav-section .nav-contacts {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10rem;

    padding: 0 var(--indent);

    opacity: 1;

    transition: all 0.3s ease 0s;
    transition-property: opacity;
}

footer .footer-nav-section .nav-contacts .contact-list {
    display: flex;
    flex-direction: column;
    gap: 2rem 5rem;
}

footer .footer-nav-section .nav-contacts.row .contact-list {
    flex-direction: row;
    flex-wrap: wrap;
}

footer .footer-nav-section .nav-contacts .contact-item {
    display: flex;
    flex-direction: row;
    gap: 2rem;

    transition: all 0.3s ease 0s;
    transition-delay: .3s, 0s;
    transition-property: opacity, font-variation-settings;
}

footer .footer-nav-section .nav-contacts .contact-item .label {
    font-size: 1.4rem;
    font-variation-settings: var(--mediumWGHT);
    text-transform: uppercase;
    letter-spacing: .15rem;
    line-height: 1.5;

    transition: all 0.3s ease 0s;
    transition-delay: .3s, 0s;
    transition-property: opacity, font-variation-settings;
}

footer .footer-nav-section .nav-contacts .contact-item label {
    transition: all 0.3s ease 0s;
    transition-property: font-variation-settings;
}

@media (hover:hover) {
    footer .footer-nav-section .nav-contacts .contact-item a.label:hover {
        font-variation-settings: var(--ultraBoldWGHT);
    }
}

@media screen and (max-width: 900px) {
    footer .footer-nav-section .nav-contacts {
        flex-direction: column;
        gap: 5rem;
    }

    footer .footer-nav-section .nav-contacts .contact-list {
        flex-direction: column;
    }

    footer .footer-nav-section .nav-contacts .contact-item .label {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 700px) {
    footer .footer-nav-section {
        gap: 2rem;
    }

    footer .footer-nav-section .nav-contacts .contact-item .label {
        font-size: 1.4rem;
    }


    footer .footer-nav-section .nav-section .nav-list .label {
        font-size: 2rem;
    }

    footer .footer-nav-section {
        padding-bottom: 14rem;
    }

    footer .footer-nav-section .nav-contacts,
    footer .footer-nav-section .nav-section {
        padding: 0 calc(var(--indent) * 2);
    }

    footer .footer-nav-section .divider-section {
        margin: 0 calc(var(--indent) * 2);
    }

    footer .footer-nav-section .nav-section .navigation {
        flex-wrap: wrap;
        gap: 2rem 10rem;
    }

    footer .footer-nav-section .nav-section .nav-list {
        flex-basis: calc(50% - 10rem);
    }

    footer .footer-nav-section .nav-section .nav-list.pages:first-child {
        order: 1;
    }

    footer .footer-nav-section .nav-section .nav-list.pages:nth-child(2) {
        order: 3;
    }

    footer .footer-nav-section .nav-section .nav-list:nth-child(3) {
        flex-basis: 50%;
        order: 2;
    }
}

/* MAINTENANCE MODE PAGE */
/* NEWSLETTER PAGE */

#maintenance,
#newsletter {
    overflow: hidden;
}

#maintenance main,
#newsletter main {
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#maintenance .hero-headline-section,
#newsletter .hero-headline-section {
    margin: 0 auto;
}

#maintenance .graphic-illustration,
#newsletter .graphic-illustration {}

#maintenance .maintenance-logo {
    height: 40vh;
    height: calc(var(--vh) * 40);
    width: auto;
    max-width: 80vw;
}

#newsletter .maintenance-logo {
    height: 30vh;
    height: calc(var(--vh) * 30);
    width: auto;
    max-width: 60vw;
}

#maintenance .newsletter-module,
#newsletter .newsletter-module {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    width: 80%;
}

#maintenance .newsletter-heading-wrapper,
#newsletter .newsletter-heading-wrapper {
    justify-content: center !important;
}

#maintenance .newsletter-heading .heading,
#newsletter .newsletter-heading .heading {
    font-size: 3.6rem;
    text-align: center;
}

#maintenance .newsletter-text,
#newsletter .newsletter-text {
    display: none;
}

#maintenance .form .field:not(:last-child)::after,
#newsletter .form .field:not(:last-child)::after {
    display: none;
}

#maintenance .preview-module,
#newsletter .preview-module {
    text-transform: uppercase;
    color: var(--theme-text);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;

    z-index: 10;
}

#maintenance .preview-module::before,
#newsletter .preview-module::before {
    content: "";
    display: block;
    background-color: var(--theme-text);
    height: var(--lineStroke);
    width: 3ch;
}

#maintenance .preview-module .preview-code-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

#maintenance .preview-module input {
    text-align: center;
    color: var(--theme-text);
    border-bottom: solid var(--lineStroke) var(--theme-text);
    width: 13.5ch;
}

#maintenance .preview-module input::placeholder {
    color: var(--theme-text);
    opacity: 1;
}

#maintenance .preview-module input::-ms-input-placeholder {
    color: var(--theme-text);
}

#maintenance .preview-module button {
    color: var(--theme-text);
    border: solid var(--lineStroke) var(--theme-text);
    padding: 1rem 3rem;
}

#maintenance .hero-illustration.landscape,
#newsletter .hero-illustration.landscape {
    top: 57.5%;
}

@media screen and (max-width: 900px) {

    #maintenance .hero-headline-section,
    #newsletter .hero-headline-section {
        width: 80%;
    }
}

@media screen and (max-width: 700px) {

    #maintenance .maintenance-logo,
    #newsletter .maintenance-logo {
        height: 30vh;
        height: calc(var(--vh) * 30);
        max-width: 90vw;
    }

    #maintenance .newsletter-module,
    #newsletter .newsletter-module {
        width: 100%;
    }

    #maintenance .form .form-inputs,
    #newsletter .form .form-inputs {
        gap: 1rem;
    }
}

/* OVERLAY CONTENT */

#overlay-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1rem;
    
    position: fixed;
    left: 0;
    bottom: 8rem;
    
    z-index: 9999;
}

@media screen and (max-width: 900px) {
    #overlay-content{
        width: calc( 100% - 8rem );
        bottom: 11rem;
    }
    
    #overlay-content .closed{
        transform: translateX(4rem);
    }
}

@media screen and (max-width: 700px) {
    body:has(#overlay-content) .main-menu{
        bottom: -2vh;
    }
}

/* ON SCROLL ANIMS */

.reveal {
    opacity: 0;
    transform: translateY(40px);

    transition: all .9s ease 0s;
    transition-property: opacity, transform;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

.reveal .heading,
.reveal .text,
.reveal .heading em,
.reveal .text em,
.reveal .heading strong,
.reveal .text strong,
.reveal .heading u,
.reveal .text u {
    font-variation-settings: 'wght'200;
    transition: all 2s ease 0s;
    transition-duration: 2s, .6s, .3s;
    transition-property: font-variation-settings, letter-spacing, color;
}

.hide-up {
    transform: translateY(-40px);
    opacity: 0;

    transition: all .9s ease 0s;
    transition-property: opacity, transform;
}

/* MISC ANIMATIONS */

@-webkit-keyframes swing {

    10%,
    90% {
        transform: rotate(-2deg);
    }

    20%,
    80% {
        transform: rotate(4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-5deg);
    }

    40%,
    60% {
        transform: rotate(4deg);
    }
}

@keyframes swing {

    10%,
    90% {
        transform: rotate(-2deg);
    }

    20%,
    80% {
        transform: rotate(4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-5deg);
    }

    40%,
    60% {
        transform: rotate(4deg);
    }
}

@-webkit-keyframes smallswing {

    10%,
    90% {
        transform: rotate(-1deg);
    }

    20%,
    80% {
        transform: rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-1.5deg);
    }

    40%,
    60% {
        transform: rotate(2deg);
    }
}

@keyframes smallswing {

    10%,
    90% {
        transform: rotate(-1deg);
    }

    20%,
    80% {
        transform: rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(-1.5deg);
    }

    40%,
    60% {
        transform: rotate(2deg);
    }
}

@-webkit-keyframes shake {

    10%,
    90% {
        transform: translate(-1.5px, -1px);
    }

    20%,
    80% {
        transform: translate(1.75px, 1.5px);
    }

    30%,
    50%,
    70% {
        transform: translate(-2.25px, -1.75px);
    }

    40%,
    60% {
        transform: translate(2px, 1.5px);
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translate(-1.5px, -1px);
    }

    20%,
    80% {
        transform: translate(1.75px, 1.5px);
    }

    30%,
    50%,
    70% {
        transform: translate(-2.25px, -1.75px);
    }

    40%,
    60% {
        transform: translate(2px, 1.5px);
    }
}

@-webkit-eyframes vertshake {

    10%,
    90% {
        transform: translate(0, -6px) rotate(2deg);
    }

    20%,
    80% {
        transform: translate(0, 9px) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -7.5px) rotate(2.5deg);
    }

    40%,
    60% {
        transform: translate(0, 12px) rotate(-3deg);
    }
}

@keyframes vertshake {

    10%,
    90% {
        transform: translate(0, -6px) rotate(2deg);
    }

    20%,
    80% {
        transform: translate(0, 9px) rotate(-3deg);
    }

    30%,
    50%,
    70% {
        transform: translate(0, -7.5px) rotate(2.5deg);
    }

    40%,
    60% {
        transform: translate(0, 12px) rotate(-3deg);
    }
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg) scale(1.1);
    }

    to {
        transform: rotate(360deg) scale(1.1);
    }
}