/* -+-----------------+--------------------------+---- */
/* +------------+------------+--------------+------+-- */
/* ----+--------------+------------*=@---------------- */
/* ---------------+---------------@@@@@-------+------- */
/* --------+----------------------*@@@%-----------+--- */
/* --+----------------+------------%%%%=-------------- */
/* ---------------------------=*%%::-+**=.**=--+------ */
/* ---------+----------------#@@@%-::::::::%%--------- */
/* ----+---------+-----------@@@@%==----::-%@%-------- */
/* -------------------------*@@@@#*+=-----=@@@-------- */
/* -+------+---------+------@@@-#%#+==---=--@@%----+-- */
/* -----+--------+---------@@@*-=%#*+=--==-*@@*------- */
/* -----------------------+@@=---##*==-===-@@%---+---- */
/* --+-----+- Ah shit, here we go again. -#@*--------- */
/* ----------------+------@@@----%%*++====+@--------+- */
/* ------+----------------@@@---%%#*+=++-+@=----+----- */

/* FONTS */

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('../fonts/public/ABCMonumentGrotesk-Light.woff2') format('woff2'),
        url('../fonts/public/ABCMonumentGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('../fonts/public/ABCMonumentGrotesk-Regular.woff2') format('woff2'),
        url('../fonts/public/ABCMonumentGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'ABC Monument Grotesk';
    src: url('../fonts/public/ABCMonumentGrotesk-Medium.woff2') format('woff2'),
        url('../fonts/public/ABCMonumentGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'ABC Monument Grotesk SemiMono';
    src: url('../fonts/public/ABCMonumentGroteskSemi-Mono-Light.woff2') format('woff2'),
        url('../fonts/public/ABCMonumentGroteskSemi-Mono-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'ABC Monument Grotesk Mono';
    src: url('../fonts/public/ABCMonumentGroteskMono-Light.woff2') format('woff2'),
        url('../fonts/public/ABCMonumentGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'ABC Monument Grotesk Mono';
    src: url('../fonts/public/ABCMonumentGroteskMono-Regular.woff2') format('woff2'),
        url('../fonts/public/ABCMonumentGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
}

/* START */

:root {
    /* color */
    --white: #ffffff;
    --lightGrey: #f2f2f2;
    --grey: #e0e0e0;
    --midGrey: #d1c4b8;
    --darkGrey: #808080;
    --darkerGrey: #292929;
    --black: #1a1a1a;
    --terracotta: #ef4922;
    --brown: #88401f;
    --green: #6e8400;
    
    --concrete: #d1c4b8;
    --terracotta: #b38163;
    --oxide: #88401f;
    --darkSoil: #3a180f;
    --deepGround: #110a05;

    /* typography */
    --sansType: "ABC Monument Grotesk", sans-serif;
    --semimonoType: "ABC Monument Grotesk SemiMono", sans-serif;
    --monoType: "ABC Monument Grotesk Mono", monospace;

    /* mesurements */
    --100vh: calc(100 * var(--vh));
    --spacing: 1rem;
    --lineStroke: .125rem;
    --indent: 6rem;
    --logoAspectRatio: (469 / 800);
}

::scrollbar {
    display: none;
}

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

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

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

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

::selection {
    background: var(--concrete);
    color: var(--terracotta);
}

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


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

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

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

    color: var(--black);
    background-color: var(--white);

    overflow-x: hidden;

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

body::before,
body::after {
    content: "";

    position: fixed;
    left: 0;

    width: 100vw;
    height: 1rem;

    background-color: var(--white);

    z-index: 25;
}

body::before {
    top: 0;
}

body::after {
    bottom: 0;
}

@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(.5rem + (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(.4rem + (100vw - 700px) / 400);
    }
}

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

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

.outer-wrapper {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

main {
    display: flex;
    flex-direction: column;
    row-gap: 12rem;
}

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

    main {
        row-gap: 10rem;
    }
}

/* TEXT UNDERLINE */

.underline {
    display: inline-block;
    position: relative;
    padding: .25rem .25ch .25rem .25ch;
    margin: -.25rem -.25ch -.2rem -.25ch;

    box-shadow: inset 0 -.075em 0 0 var(--black);
    mix-blend-mode: multiply;
    transition: all 0.3s ease 0s;
    transition-property: box-shadow, color;
}

.underline-alt {
    display: inline-block;
    position: relative;
    padding: .25rem .25ch .25rem .25ch;
    margin: -.25rem -.25ch -.2rem -.25ch;

    box-shadow: inset 0 0 0 0 var(--black);
    mix-blend-mode: multiply;
    transition: all 0.3s ease 0s;
    transition-property: box-shadow, color;
}

@media (hover: hover) {
    .underline:hover {
        color: var(--white);
        box-shadow: inset 0 calc(-1em - 0.4rem) 0 0 var(--black);
        transition: all 0.3s ease 0s;
        transition-property: box-shadow, color;
    }

    .underline-alt:hover {
        color: var(--white);
        box-shadow: inset 0 -.075em 0 0 var(--black);
        transition: all 0.3s ease 0s;
        transition-property: box-shadow, color;
    }
}

/* HEADINGS */

.heading {
    font-family: var(--semimonoType);
    font-weight: 300;
    font-size: 9rem;
    letter-spacing: -.22rem;
}

.heading.large {
    font-size: 10.8rem;
    letter-spacing: -.25rem;
    line-height: .75;
    max-width: 90rem;
}

.heading.medium {
    font-size: 9rem;
    line-height: .75;
}

.heading.small {
    font-size: 7.2rem;
    line-height: .85;
}

.heading.extra-small {
    font-size: 5.4rem;
    line-height: .95;
}

.heading.smallest {
    font-size: 3.6rem;
}

@media screen and (max-width: 1080px) {
.heading.large {
        font-size: 10.2rem;
        max-width: 80rem;
    }

    .heading,
    .heading.medium {
        font-size: 8.4rem;
    }
    
    .heading.medium{
        line-height: .85;
    }

    .heading.small
        font-size: 6.6rem;
    }

    .heading.extra-small {
        font-size: 4.8rem;
    }

    .heading.smallest {
        font-size: 3rem;
    }
}

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

    .heading,
    .heading.medium {
        font-size: 8.4rem;
    }

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

    .heading.extra-small {
        font-size: 5.4rem;
    }

    .heading.smallest {
        font-size: 3.6rem;
    }
}

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

    .heading,
    .heading.medium {
        font-size: 8.4rem;
    }
    
    .heading.medium{
        line-height: .95;
    }

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

    .heading.extra-small {
        font-size: 5.4rem;
    }

    .heading.smallest {
        font-size: 4.8rem;
    }
}

@media screen and (max-width: 500px){
    #presale .heading.medium{
        font-size: 5.4rem;
    }
}

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

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

    .heading.small {
        font-size: 6rem;
    }

    .heading.extra-small,
    #presale .heading.medium{
        font-size: 4.8rem;
    }

    .heading.smallest {
        font-size: 3.6rem;
    }
}

/* BODY TEXT */

.text {
    font-family: var(--sansType);
    font-weight: 300;
    line-height: 1.25;
    color: var(--darkGrey);
}

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

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

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

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

@media screen and (max-width: 1080px) {
    .text.large {
        font-size: 3.6rem;
    }

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

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


@media screen and (max-width: 700px) {
    .text.large {
        font-size: 4.8rem;
    }
    
    .text.medium {
        font-size: 4.2rem;
    }

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

@media screen and (max-width: 350px) {
    .text.large {
        font-size: 4.2rem;
    }
    
    .text.medium {
        font-size: 3.6rem;
    }

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

/* FORM PAGE */

main{
    --padding: 1rem;
    --innerWidth: calc( 100vw - var(--padding) * 2 );
    --contentWidth: 70rem;
    --logoWidth: calc( var(--innerWidth) - var(--contentWidth) );
    
    display: flex;
    flex-direction: row;
    
    background-color: var(--concrete);
    
    height: calc( var(--100vh) - var(--padding) * 2 );
}

.logo-wrapper{
    width: var(--logoWidth);
    padding: var(--padding);
}

.presale-form{
    display: flex;
    flex-direction: row;
    gap: 0;
    
    margin-top: 10rem;
}

.presale-form .description,
.presale-form .form{
    width: var(--contentWidth);
    padding: 1rem 4rem;
    
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.presale-form .description{
    
}

.presale-form .form{
    gap: 2.5rem;
}

@media screen and ( max-width: 1200px ){
    main{
        --contentWidth: 50%;
    }
}

@media screen and ( max-width: 900px ){
    main{
        --contentWidth: 100%;
    }
    
    .presale-form{
        flex-direction: column;
    }
    
    .form .heading{
        font-size: 7.2rem;
    }
}


.vertical-logo svg{
    height: calc( var(--100vh) - var(--padding) * 4 );
    width: auto;
    position: relative;
    display: block;
    
    fill: var(--terracotta)
}

.vertical-logo{
    
}

.form-heading{
    color: var(--darkSoil);
    max-width: 20ch;
}

.desc{
    color: var(--oxide);
}

.form .heading{
    color: var(--oxide);
    margin-top: 4.5rem;
}

/* LABELS */

.label {
    font-family: var(--sansType);
/*    font-weight: 500;*/
    color: var(--green);
    padding: 1rem 0;
}

@media screen and (max-width: 700px) {
    .label {
        padding: .5rem 0;
    }
}

/* CTAs */

.cta-wrapper {
    --color: var(--green);
    --hl-color: var(--green);
}

.cta-wrapper.reverse .cta {
    flex-direction: row-reverse;
    padding: 0 1rem;
}

.cta-wrapper .cta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;

    border-bottom: solid var(--lineStroke) var(--terracotta);
    
    transition: all 0.15s ease 0s;
}

.cta-wrapper.cta-form .cta{
    align-items: flex-end;
    gap: 2rem;
    border-bottom: none;
}

.cta-text {
    font-family: var(--sansType);
    font-weight: 300;
    font-size: 2rem;
    color: var(--darkSoil);

    white-space: nowrap;
    user-select: none;
    transition: all 0.15s ease 0s;
}

.cta-form .cta-text {
    padding-bottom: .75rem;
    border: none;
    border-bottom: solid var(--lineStroke) var(--color);
    width: 100%;
}

.cta-form .cta-text:focus {
    outline: none !important;
    border: none;
    border-bottom: solid var(--lineStroke) var(--darkGrey);
    box-shadow: none;
}

.cta-form button{
    border: none;
    padding: 0;
    margin: 0;
}

.cta-form button .fallback{
    display: none;
}

.cta-icon-wrapper{
    border: solid var(--lineStroke) var(--terracotta);
    transform: translateY( 1px );
}

.cta-icon {
    display: flex;
    align-items: center;

    background-color: var(--concrete);

    padding: 1rem 0;
    border: solid 1rem var(--concrete);
    border-left: solid 8rem var(--concrete);
    height: 2.4rem;

    cursor: pointer;

    transition: all 0.15s ease 0s;
}

.cta-icon {
    box-sizing: border-box;
}

.cta-icon.back {
    transform: rotate(180deg);
}

.cta-icon .arrow {
    --arrowProp: -.6rem;

    display: block;
    position: relative;
    background-color: var(--oxide);
    margin: 0 auto;

    height: var(--lineStroke);
    width: 4rem;

    transition: all 0.15s ease 0s;
}

.cta-form .cta-icon .arrow{
    border: none;
}

.cta-icon .arrow::after,
.cta-icon .arrow::before {
    content: "";
    background-color: var(--oxide);

    display: block;
    height: var(--lineStroke);
    width: 1.9rem;

    position: absolute;
    right: -.3rem;

    transition: all 0.15s ease 0s;
}

.cta-icon .arrow::after {
    top: var(--arrowProp);
    transform: rotate(45deg);
}

.cta-icon .arrow::before {
    bottom: var(--arrowProp);
    transform: rotate(-45deg);
}

@media (hover: hover) {
    .cta-wrapper:not(.cta-form):hover .cta{
        border-color: var(--green);
    }
    
    .cta-wrapper:not(.cta-form):hover .cta-text,
    .cta-wrapper.cta-form .cta-text:hover{
        font-weight: 300;
        letter-spacing: .1rem;
        color: var(--green);
    }
    
    .cta-wrapper:not(.cta-form):hover .cta-icon-wrapper{
         border-color: var(--green);
    }

    .cta-wrapper:not(.cta-form):hover .cta-icon,
    .cta-wrapper.cta-form .cta-icon:hover {
        border-left: solid 3rem var(--green);
        border-right: solid 0rem var(--green);
        background-color: var(--green);
        border-color: var(--green);
    }

    .cta-wrapper:not(.cta-form):hover .arrow,
    .cta-wrapper.cta-form .cta-icon:hover .arrow{
        --arrowProp: -1rem;
        background-color: var(--concrete);
        width: 10rem;
    }

    .cta-wrapper:not(.cta-form):hover .arrow::after,
    .cta-wrapper:not(.cta-form):hover .arrow::before,
    .cta-wrapper.cta-form .cta-icon:hover .arrow::after,
    .cta-wrapper.cta-form .cta-icon:hover .arrow::before{
        background-color: var(--concrete);
        width: 2.8rem;
        right: -.4rem;
    }
}

@media screen and (max-width: 700px) {
    .cta-text {
        font-size: 3rem;
    }
}

/* CONTACT FORM */

.contact-form-wrapper {
    height: 100%;
    width: calc(66rem);
}

.contact-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    height: auto;
    width: 100%;
}

.contact-form .form-inputs {
    height: auto;
}

.contact-form .field {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 4rem;

    padding: 1.5rem 0;
    border-bottom: solid calc(var(--lineStroke)) var(--green);


    width: 100%;
}

.contact-form .field .label,
.contact-form .field .input {
    font-weight: 300;
}

.contact-form .field .label {
    font-family: var(--semimonoType);
    color: var(--oxide);
    padding: 0;
    width: 11ch;
}

.contact-form .field .input {
    font-family: var(--sansType);
    color: var(--black);
    background-color: transparent;
    padding: unset;
    border: unset;
    width: calc(100% - 10ch);
}

.contact-form .field .input.text {
    height: 6lh;
}

.contact-form .field .input::placeholder {
    font-family: var(--semimonoType);
    color: var(--darkSoil);
    opacity: .5;
}

.contact-form .field .input::-ms-input-placeholder {
    font-family: var(--semimonoType);
    color: var(--darkSoil);
    opacity: .5;
}

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

input:-webkit-autofill,
input:-webkit-autofill:focus {
    /* trick to get rid of the unwanted styles */
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

.contact-form .field .input:focus {
    outline: none !important;
    border: none;
    box-shadow: none;
}

.contact-form .field.message-field {
    border-bottom: unset;
}

.contact-form .field.submit-field {
    border-top: solid calc(var(--lineStroke)) var(--green);
    border-bottom: unset;
}

.contact-form .field.submit-field .btn,
#submit-all{
    font-family: var(--monoType);
    font-weight: 300;
/*    text-transform: uppercase;*/
/*    font-size: 1.6rem;*/

    color: var(--darkSoil);
    background-color: var(--terracotta);
    border: solid calc(var(--lineStroke)) var(--concrete);
    padding: 1rem 2rem;

    transition: all .15s ease 0s;
    transition-property: color, background-color, border-color, letter-spacing;

    cursor: pointer;
}

.submit-actions,
.submit-actions button{
    width: 100%;
}


@media (hover:hover) {
    .contact-form .field.submit-field .btn:hover,
    #submit-all:hover{
        letter-spacing: .1rem;
        color: var(--concrete);
        background-color: var(--green);
        border-color: var(--concrete);
    }
}

@media screen and (max-width: 700px){
    .contact-form-wrapper{
        width: calc( 100vw - (8.8rem + 12.5rem ) - 8rem );
    }
}

.contact-form .select2-container{
    width: 100% !important;
}

.contact-form .select2-container .select2-selection--multiple{
    background-color: transparent;
    border: solid var(--lineStroke) transparent;
    border-radius: 0;
}

.contact-form .select2-container--default.select2-container--focus .select2-selection--multiple{
    border: solid var(--lineStroke) transparent;
    border-radius: 0;
    height: auto;
}

.contact-form .select2-container--default .select2-selection--multiple .select2-selection__choice{
    display: flex;
    align-items: center;
    gap: .25rem;
    
    font-feature-settings: 'tnum';
    background-color: transparent;
    color: var(--darkSoil);
    border: solid var(--lineStroke) var(--terracotta);
    border-radius: 0;
    padding: .25rem .75rem;
    margin: 0;
}

.contact-form .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    
    padding: 0;
}

.contact-form .select2-container--default .select2-search--inline::after{
    content: "Add more...";
    color: var(--darkSoil);
    opacity: .5;
}

.contact-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    transform: translateY(.1rem);
}

.select2-container--default .select2-selection--multiple .select2-selection__clear{
    display: none;
}

.select2-dropdown{
    background-color: var(--concrete) !important;
    border: solid var(--lineStroke) var(--green) !important;
    border-radius: 0 !important;
    
    transform: translateY(.5rem);
}

.select2-container--default .select2-results__option[aria-selected=true]{
    background-color: var(--green) !important;
    color: var(--white) !important;
}

.select2-container--default .select2-results__option[aria-selected=true]::before{
    content: "× ";
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: var(--terracotta) !important;
    color: var(--white) !important;
}

.select2-container--default .select2-search--inline .select2-search__field{
    width: 1ch;
}

/* COUNTDOWN */

.countdown-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    
    height: 100%;
    width: 100%;
}

.countdown-wrapper .heading span{
    color: var(--oxide);
}

#countdown{
    font-family: var(--monoType);
    font-weight: 300;
    font-size: 2rem;
}

/* MAINTENANCE */

#maintenance{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    
    height: 100vh;
    width: 100vw;
}

/* SCROLL HINT */

.scrollHint {
    --size: 1.8rem;
    font-family: var(--monoType);
    font-weight: 300;
    font-size: var(--size);

    background-color: var(--darkGrey);
    padding: 2rem 4rem;
    height: var(--size);
    width: 8ch;

    position: fixed;
    bottom: 0;
    left: 0;
    
    z-index: 999;
}

.scrollHint::before,
.scrollHint::after{
    position: absolute;
}

.scrollHint::before {
    content: 'Scroll ';
}

.scrollHint::after {
    content: '↘';
    color: var(--terracotta);
    padding-left: 7ch;
    position: absolute;
    animation: vertshake 3s cubic-bezier(.36, .07, .19, .97) both infinite;
}

@keyframes vertshake {
    10%,
    90% {
        transform: translate(-1px, -1px);
    }

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

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

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


/* ON SCROLL ANIM */

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

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

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

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

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