/* =========================================================
   NJOY CREATIONS
   CONTACT PAGE
========================================================= */


/* =========================================================
   CONTACT HERO
========================================================= */

.contact-hero {

    min-height: 88vh;

    padding:
        150px 5vw 70px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

}


/* GRID */

.contact-hero::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(247,244,236,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(247,244,236,.045) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    pointer-events:
        none;

    mask-image:
        linear-gradient(
            to bottom,
            black 15%,
            transparent 90%
        );

}


/* TOP */

.contact-hero-top {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--accent-soft);

}


/* CONTENT */

.contact-hero-content {

    position:
        relative;

    z-index:
        1;

    margin-top:
        70px;

}


.contact-eyebrow {

    color:
        var(--accent);

    font-size:
        12px;

    letter-spacing:
        .18em;

    margin-bottom:
        30px;

}


.contact-hero h1 {

    margin:
        0;

    font-size:
        clamp(
            80px,
            14vw,
            210px
        );

    line-height:
        .8;

    letter-spacing:
        -.07em;

    font-weight:
        800;

}


.contact-hero h1 span {

    color:
        var(--accent);

}


.contact-hero-content p {

    max-width:
        460px;

    margin:
        60px 0 0 32vw;

    color:
        var(--accent-soft);

    font-size:
        17px;

    line-height:
        1.65;

}


/* BOTTOM */

.contact-hero-bottom {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--white);

}


/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {

    padding:
        130px 5vw 150px;

    border-top:
        1px solid var(--line);

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        42% 58%;

    gap:
        7vw;

    align-items:
        start;

}


/* =========================================================
   LEFT SIDE
========================================================= */

.contact-section-label {

    color:
        var(--accent);

    font-size:
        11px;

    margin-bottom:
        40px;

}


.contact-left h2 {

    margin:
        0;

    font-size:
        clamp(
            55px,
            6vw,
            100px
        );

    line-height:
        .83;

    letter-spacing:
        -.06em;

    font-weight:
        700;

}


.contact-left h2 em {

    color:
        var(--accent);

    font-style:
        normal;

}


.contact-description {

    max-width:
        450px;

    margin:
        45px 0 0;

    color:
        var(--accent-soft);

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {

    margin-top:
        65px;

    border-top:
        1px solid var(--line);

}


.cd-item {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        18px 0;

    border-bottom:
        1px solid var(--line);

}


.cd-item > a {

    text-decoration:
        none;

}


.cd-icon {

    width:
        42px;

    height:
        42px;

    border:
        1px solid var(--line);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--accent);

    transition:
        background .3s ease,
        color .3s ease;

}


.cd-item:hover .cd-icon {

    background:
        var(--accent);

    color:
        var(--dark);

}


.cd-label {

    color:
        var(--accent-soft);

    font-size:
        9px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    margin-bottom:
        5px;

}


.cd-val {

    color:
        var(--white);

    font-size:
        13px;

}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form {

    padding:
        45px;

    background:
        var(--surface);

    border:
        1px solid var(--line);

}


.form-heading {

    padding-bottom:
        30px;

    margin-bottom:
        35px;

    border-bottom:
        1px solid var(--line);

}


.form-heading span {

    color:
        var(--accent);

    font-size:
        10px;

}


.form-heading p {

    margin:
        14px 0 0;

    color:
        var(--accent-soft);

    font-size:
        14px;

}


/* =========================================================
   FORM ROW
========================================================= */

.cf-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


/* =========================================================
   FORM GROUP
========================================================= */

.cf-group {

    margin-bottom:
        25px;

}


.cf-group label {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--white);

    font-size:
        10px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.req {

    color:
        var(--accent);

}


/* =========================================================
   INPUTS
========================================================= */

.cf-group input,
.cf-group select,
.cf-group textarea {

    width:
        100%;

    border:
        1px solid
        rgba(
            247,
            244,
            236,
            .15
        );

    background:
        rgba(
            8,
            8,
            8,
            .65
        );

    color:
        var(--white);

    padding:
        16px 17px;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        13px;

    transition:
        border-color .3s ease,
        background .3s ease;

}


.cf-group input::placeholder,
.cf-group textarea::placeholder {

    color:
        rgba(
            169,
            139,
            90,
            .65
        );

}


.cf-group select {

    appearance:
        none;

    cursor:
        pointer;

}


.cf-group select option {

    background:
        var(--surface);

    color:
        var(--white);

}


.cf-group textarea {

    resize:
        vertical;

    min-height:
        150px;

}


.cf-group input:focus,
.cf-group select:focus,
.cf-group textarea:focus {

    border-color:
        var(--accent);

    background:
        rgba(
            8,
            8,
            8,
            .9
        );

}


/* VALID */

.cf-group input.f-valid,
.cf-group select.f-valid,
.cf-group textarea.f-valid {

    border-color:
        rgba(
            214,
            180,
            119,
            .7
        );

}


/* INVALID */

.cf-group input.f-invalid,
.cf-group select.f-invalid,
.cf-group textarea.f-invalid {

    border-color:
        #9b5148;

}


/* =========================================================
   FORM MESSAGE
========================================================= */

.form-message {

    min-height:
        22px;

    margin:
        5px 0 15px;

    font-size:
        12px;

    line-height:
        1.5;

}


.form-message.success {

    color:
        var(--accent);

}


.form-message.error {

    color:
        #d77b70;

}


/* =========================================================
   SHAKE
========================================================= */

.f-shake {

    animation:
        formShake .5s ease;

}


@keyframes formShake {

    0%,
    100% {

        transform:
            translateX(0);

    }

    20% {

        transform:
            translateX(-7px);

    }

    40% {

        transform:
            translateX(7px);

    }

    60% {

        transform:
            translateX(-5px);

    }

    80% {

        transform:
            translateX(5px);

    }

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.cf-submit {

    width:
        100%;

    min-height:
        60px;

    border:
        1px solid var(--accent);

    background:
        var(--accent);

    color:
        var(--dark);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 22px;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.cf-submit i {

    font-size:
        16px;

    transition:
        transform .3s ease;

}


.cf-submit:hover {

    background:
        transparent;

    color:
        var(--accent);

}


.cf-submit:hover i {

    transform:
        translateX(5px);

}


.cf-submit:disabled {

    opacity:
        .6;

    cursor:
        not-allowed;

    transform:
        none;

}


/* =========================================================
   FORM NOTE
========================================================= */

.form-note {

    margin:
        15px 0 0;

    color:
        rgba(
            169,
            139,
            90,
            .7
        );

    font-size:
        9px;

    line-height:
        1.5;

}


/* =========================================================
   STATEMENT
========================================================= */

.contact-statement {

    min-height:
        70vh;

    padding:
        120px 5vw;

    background:
        var(--white);

    color:
        var(--dark);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.contact-statement > div {

    color:
        var(--accent-soft);

    font-size:
        10px;

    margin-bottom:
        35px;

}


.contact-statement h2 {

    margin:
        0;

    font-size:
        clamp(
            65px,
            10vw,
            155px
        );

    line-height:
        .82;

    letter-spacing:
        -.07em;

}


.contact-statement h2 span {

    color:
        var(--accent-soft);

}


/* =========================================================
   REVEAL
========================================================= */

.contact-statement {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.contact-statement.show {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {


    /* HERO */

    .contact-hero {

        min-height:
            78vh;

        padding:
            125px 6vw 60px;

    }


    .contact-hero-content {

        margin-top:
            60px;

    }


    .contact-hero h1 {

        font-size:
            clamp(
                65px,
                17vw,
                115px
            );

    }


    .contact-hero-content p {

        margin:
            45px 0 0;

        max-width:
            340px;

        font-size:
            14px;

    }


    .contact-hero-bottom {

        font-size:
            9px;

    }


    /* CONTACT */

    .contact-section {

        padding:
            85px 6vw 100px;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            70px;

    }


    .contact-left h2 {

        font-size:
            clamp(
                48px,
                13vw,
                85px
            );

    }


    .contact-description {

        font-size:
            14px;

        margin-top:
            35px;

    }


    .contact-details {

        margin-top:
            50px;

    }


    /* FORM */

    .contact-form {

        padding:
            28px 22px;

    }


    .cf-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .cf-group {

        margin-bottom:
            22px;

    }


    .cf-submit {

        min-height:
            56px;

        padding:
            0 18px;

        font-size:
            9px;

    }


    /* STATEMENT */

    .contact-statement {

        min-height:
            60vh;

        padding:
            90px 6vw;

    }


    .contact-statement h2 {

        font-size:
            clamp(
                55px,
                15vw,
                100px
            );

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    .contact-hero {

        padding-top:
            115px;

    }


    .contact-hero-top {

        font-size:
            9px;

    }


    .contact-hero h1 {

        font-size:
            58px;

    }


    .contact-section-label {

        font-size:
            9px;

    }


    .contact-left h2 {

        font-size:
            45px;

    }


    .cd-item {

        gap:
            12px;

    }


    .cd-icon {

        width:
            38px;

        height:
            38px;

    }


    .cd-val {

        font-size:
            12px;

    }


    .contact-form {

        padding:
            24px 17px;

    }


    .form-heading {

        margin-bottom:
            28px;

    }


    .cf-group input,
    .cf-group select,
    .cf-group textarea {

        padding:
            14px;

        font-size:
            12px;

    }


    .contact-statement h2 {

        font-size:
            52px;

    }

}