/* FONTS */

@font-face {
    font-family: 'Highway Gothic Expanded';
    src: url('../fonts/public/HWYGEXPD.woff2') format('woff2'),
        url('../fonts/public/HWYGEXPD.ttf') format('truetype');
}

@font-face {
    font-family: 'Antipol';
    src: url('../fonts/public/fonnts.com-Antipol_VF.woff2') format('woff2'),
        url('../fonts/public/fonnts.com-Antipol_VF.otf') format('opentype');
}

/* START */

:root {
    /* color */
    --black: #111111;
    --grey-900: #282828;
    --grey-800: #3e3e3c;
    --grey-700: #555450;
    --grey-600: #6b6a64;
    --grey-500: #828079;
    --grey-400: #98968d;
    --grey-300: #aeaca1;
    --grey-200: #c5c2b6;
    --grey-100: #dbd8ca;
    --white: #E9EBE4;
    --yellow: #ffff00;

    /* typography */
    --detailType: "Highway Gothic Expanded", sans-serif;
    --bodyType: "Antipol", sans-serif;

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

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

/* COLOR THEMES */

.light-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--grey-100);
    --theme-background-accent: red;

    --theme-ui: red;
    --theme-ui-accent: red;

    --theme-text: var(--grey-800);
    --theme-text-accent: var(--grey-900);

    --theme-btn-background: var(--yellow);
    --theme-btn-text: var(--black);

    --theme-graphics: var(--black);
    --theme-graphics-background: var(--black);
    --theme-graphics-text: var(--yellow);
    --theme-graphics-accent: var(--yellow);
}

.dark-theme {
    /* PRIMARY SCHEME */
    --theme-background: var(--yellow);
    --theme-background-accent: red;

    --theme-ui: red;
    --theme-ui-accent: red;

    --theme-text: var(--grey-800);
    --theme-text-accent: var(--grey-200);

    --theme-btn-background: var(--black);
    --theme-btn-text: var(--grey-100);

    --theme-graphics: var(--grey-100);
    --theme-graphics-background: var(--grey-100);
    --theme-graphics-text: var(--black);
    --theme-graphics-accent: var(--black);
}

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

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

.dark-theme .bg-grain {
    opacity: .15;
}

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

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

body {
    font-family: var(--bodyType);
    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;

    transition: all .3s ease-in-out;
    transition-property: background-color, color;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body#index {
    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;
    }
}

@media screen and (max-width: 350px) {
    .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;
/*    gap: calc( var(--indent) * 4 );*/
}

#index .outer-wrapper,
#about .outer-wrapper {
    flex-direction: row;
}

#index.maintenance .outer-wrapper {
    overflow: hidden !important;
}

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

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

    padding: var(--navHeight) var(--indent) var(--indent);
    width: 100%;

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


#index main,
#about main {
    justify-content: center;
    align-items: center;
}

#index main{
    padding: var(--indent);
}

#index.maintenance main{
    overflow: hidden;
}

@media screen and (max-width: 1080px){
    #index .outer-wrapper,
    #about .outer-wrapper {
        flex-direction: column;
        justify-content: space-between;
        gap: 0;
        height: calc( var(--vh) * 100 );
    }
}

/* NAVIGATION */

/* HERO NAV */

nav {
    font-family: var(--detailType);
}

nav .lang-list .lang-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

nav .lang-list .lang-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    background-color: var(--theme-text-accent);
    height: .35em;
    width: .35em;
    border-radius: .7rem;
}

#index .hero-section nav {
    position: fixed;
    top: 0;
    left: 0;

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

    width: 100%;
}

#index .hero-section nav .nav-item {
    position: fixed;

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

    pointer-events: all;
    z-index: 9999;
}

#index .hero-section nav .nav-item:nth-child(1) {
    top: 4.5rem;
    left: 50vw;
}

#index .hero-section nav .nav-item:nth-child(2) {
    top: 50vh;
    left: 28vw;
}

#index .hero-section nav .nav-item:nth-child(3) {
    top: 50vh;
    right: 23vw;
}

#index .hero-section nav .nav-item:nth-child(4) {
    bottom: 5rem;
    left: 50vw;
}

#index .hero-section nav .lang-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

#index .hero-section nav .nav-list .label {
    text-transform: uppercase;
    color: var(--theme-text-accent);
}



#index.maintenance .hero-section nav .nav-item:nth-child(1) {
    top: calc( var(--vh) * 50 );
    right: unset;
    left: calc(50vw - 20%);
    transform: translate(-50%, -50%);
}

#index.maintenance .hero-section nav .nav-item:nth-child(2) {
    top: calc( var(--vh) * 50 );
    right: calc(50vw - 20%);
    left: unset;
    transform: translate(50%, -50%);
}


#index.maintenance .hero-section nav .nav-list .label{
    font-size: 4rem;
    pointer-events: none !important;
}

@media screen and (max-width: 1080px){
    #index.maintenance .hero-section nav .nav-item:nth-child(1) {
        left: calc(25vw - 10%);
    }

    #index.maintenance .hero-section nav .nav-item:nth-child(2) {
        right: calc(25vw - 10%);
    }
}

@media screen and (max-width: 700px){
    #index.maintenance .hero-section nav .nav-list .label{
        font-size: 3.2rem;
    }
}

/* STD NAV */

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

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

    width: 100%;

    pointer-events: all;
    z-index: 9999;
}

header nav .menu-btn {
    display: none;
}

header nav .navigation .nav-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem 4rem;

    padding: 2rem 35rem;
}

header nav .navigation .nav-list .label {
    text-transform: uppercase;
    color: var(--theme-text-accent);
}

header nav .navigation .nav-list .lang-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* THEME SWITCH */

.theme-switch-wrapper {
    --baseSize: 1rem;
    position: fixed;
    top: 3.25rem;
    transform: translateY(-50%);
    right: 4rem;
}

.theme-switch-wrapper .theme-switch {
    appearance: none;
    background-color: var(--theme-btn-background);
    border: unset;
    border-radius: unset;
    flex-shrink: 0;
    height: calc( var(--baseSize) * 2.5 );
    margin: 0 0 0 0;
    position: relative;
    width: calc( var(--baseSize) * 5 );

    transition: all .15s ease-out;
    cursor: pointer;

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

    animation: swing 3s cubic-bezier(.36, .07, .19, .97) both infinite;
    animation-delay: .2s;
}

.theme-switch-wrapper .theme-switch::after {
    background-color: var(--theme-btn-text);
    border-radius: 50%;
    content: "";
    height: calc( var(--baseSize) * 2 );
    left: calc( var(--baseSize) * .25 );
    position: absolute;
    top: calc( var(--baseSize) * .25 );
    width: calc( var(--baseSize) * 2 );

    transition: all .15s ease-out;
}

.theme-switch-wrapper .theme-switch:checked::after {
    left: calc( var(--baseSize) * 2.75 );
}

@media screen and (max-width: 700px){
    .theme-switch-wrapper {
        --baseSize: 1.5rem;
        top: 4rem;
        right: 2rem;
    }
}

/* HERO MENU */

/* SIDE LOGOS */

.side-logo-wrap {
    --padding: var(--indent);

    height: calc(var(--vh)* 100);
    width: calc((var(--vh) * 100) * .25 + (var(--padding) * 1.5));
    
    z-index: -1;
}

.side-logo.logo-lettering-compressed,
.side-logo.logo-lettering-compressed.svg-mask {
    aspect-ratio: 1 / 0.25;
}

.side-logo.logo-lettering-compressed svg{
    fill: var(--theme-graphics);
}

.side-logo.logo-lettering.left,
.side-logo.logo-lettering.right {
    margin: var(--padding);

    width: calc((var(--vh)* 100) - var(--padding)* 2);
    height: fit-content;

    transform-origin: top left;
}

.side-logo.logo-lettering.left {
    transform: rotate(-90deg) translate(-100%, 0%);
}

.side-logo.logo-lettering.right {
    transform: rotate(90deg) translate(0%, -100%);
}

@media screen and (max-width: 1080px){
    .side-logo-wrap{
        height: auto;
        width: 100vw;
    }
    
    .side-logo.logo-lettering.left,
    .side-logo.logo-lettering.right {
        width: calc( 100vw - var(--padding)* 2);
        height: fit-content;

        transform-origin: top left;
    }
    
    .side-logo.logo-lettering.left {
        transform: rotate(0deg) translate(0%, 0%);
    }

    .side-logo.logo-lettering.right {
        transform: rotate(180deg) translate(-100%, -100%);
    }
}

/* HERO MENU ILLUSTRATION */

.menu-illustration-wrapper {
    --padding: calc(var(--indent) * 2);

    overflow: hidden;
}

.menu-illustration-wrapper .menu-illustration,
.menu-illustration-wrapper > svg{
    fill: var(--theme-graphics-background);

    height: calc(100vh - var(--padding) * 2);
    height: calc((var(--vh) * 100) - var(--padding) * 2);
    width: calc((var(--vh) * 100) - var(--padding) * 2);
    max-width: calc( 100vw - ( var(--padding)  * 5.5) - ( (var(--vh) * 100) * .25 + (var(--padding) * 1.5) ) * 2 );
    aspect-ratio: 1 / 1;
}

.menu-illustration-wrapper > svg g{
    position: absolute;
}

.hero-section .hero-section-content {
    --padding: 2rem;

    display: flex;
    flex-direction: column;

    width: 50%;
}

@media screen and (max-width: 1080px){
    .menu-illustration-wrapper .menu-illustration,
    .menu-illustration-wrapper > svg{
        height: auto;
        width: calc( 100vw - var(--padding) );
        max-width: unset;
        max-height: calc( 100vh - ( 100vw * .25 + (var(--padding) * 1.5) ) * 2 );
    }
}

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

/* SVG MASKS */

.svg-mask {
    background-color: var(--theme-graphics);

    height: auto;
    width: auto;

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

.logo-lettering-compressed.svg-mask {
    /*
    --width: 10rem;
    
    height: auto;
    width: var(--width);
    
    aspect-ratio: 4.1 / 1;
*/
}

/* 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;
    /*    flex-direction: column;*/
    justify-content: center;
    /*    align-items: center;*/
    gap: 1rem;
    position: relative;
}

.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: 26rem auto 30rem;*/
    /*    margin: calc(var(--vh) * 50 - 8rem - 12rem) auto;*/
    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: 11.25ch;*/
    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: 11.25ch;*/
        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 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;
    }
}

/* INDEX ILLUSTRATION CTA */

.menu-illustration-wrapper a {
    display: block;

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

.illustration-cta {
    transform-origin: 50% 50%;
    transition: all .25s ease-in-out;
    transition-property: transform;
}

.illustration-cta > path {
    fill: var(--theme-graphics-text);
}

.illustration-cta > g > path {
    fill: var(--theme-graphics-background);
}

.illustration-cta.swing-anim {}

@media (hover:hover) {
    .menu-illustration-wrapper a:hover {
        animation-play-state: paused;
    }

    .menu-illustration-wrapper a:hover .illustration-cta {
        transform: scale(1.05);
    }
}

/* CTAs */

.cta-wrapper {}

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

.cta-wrapper.float {
    position: fixed;
    pointer-events: all;
    z-index: 100;
}

#index .contact-cta-wrapper.float {
    bottom: calc( 50vh - 9.5vw );
    right: calc(50vw - 10rem);
}

.contact-cta-wrapper.float {
    bottom: 4rem;
    right: 2rem;
}

.contact-cta-wrapper.float .cta-badge svg .cls-1 {
    fill: var(--theme-graphics-background);
}

.contact-cta-wrapper.float .cta-badge svg .cls-2 {
    fill: var(--theme-graphics-text);
}

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


@media screen and (max-width: 900px) {
    #index .contact-cta-wrapper.float{
        bottom: calc( 50vh - 20vw );
    }
}

@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-alt-ui-accent);
    display: flex;
    flex-basis: 100%;

    width: 35rem;

    -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 {
    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;
        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 {
        order: 2;
    }

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

/* PROJECT LIST PAGES */

.project-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 var(--indent);
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: var(--indent);
    width: 100%;
}

.project-card .project-thumbnail img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    
    border-radius: var(--corner);
}

.project-card .project-meta{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.project-card .project-meta .meta-header{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0;
}

.project-card .project-meta .project-title{
    color: var(--theme-text);
}

.project-card .project-meta .project-title::after{
    content: ", ";
    display: inline-block;
    margin-left: -.25ch;
    margin-right: 1ch;
}

.project-card .project-meta .project-date{
    text-transform: uppercase;
}

.project-card .project-tags{
    display: flex;
    flex-direction: row;
    gap: 1ch;
}

.project-card .project-tags .project-tag::after{
    display: inline-block;
    color: var(--theme-text-accent);
    margin-left: -.25ch;
}

.project-card .project-tags .project-tag:not(:last-child)::after{
    content: "; ";
}

.project-card .project-tags .project-tag:last-child::after{
    content: ".";
}

/* MENU MASONRY GRID */

.project-list-wrapper.grid {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

/* 3 columns at very large size */
.project-list-wrapper .grid-col {
    --nColumns: 4;
    display: flex;
    flex-direction: column;
    gap: 4rem;

    width: calc( ( 100% - var(--indent) * ( var(--nColumns) - 1 ) ) / var(--nColumns) );
    margin: 0 auto;

    box-sizing: border-box;
}

.project-list-wrapper .grid-item {
    height: auto;
}

/* 3 columns at large size */
@media screen and (max-width: 1900px) {
    .project-list-wrapper .grid-col {
        --nColumns: 3;
    }
    
    .project-list-wrapper .grid-col:nth-child(3) {
        display: none;
    }
}

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

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

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

@media screen and (max-width: 700px) {
    .project-list-wrapper .grid-col {
        width: calc(100% - 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) {
        padding-bottom: 2rem;
        border-bottom: solid var(--lineStroke) var(--theme-alt-text);
    }
*/

    .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: calc( var(--vh) * 100 );
}

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

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

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

#newsletter .maintenance-logo {
    height: calc( var(--vh) * 30 );
    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: calc( var(--vh) * 30 );
        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;
    }
}

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