/* ==========================================================
   CAVEMEN CUSTOMS
   CONTACT PAGE
   ========================================================== */


.contact-page {

    --contact-bg: #0b0d10;
    --contact-dark: #07090b;
    --contact-panel: #101317;

    --contact-text: #f1f1f1;
    --contact-muted: #8d949b;

    --contact-line: #252a2f;

    --contact-orange: #d35400;

    background: var(--contact-bg);
    color: var(--contact-text);

    overflow: hidden;
}


.contact-container {

    width: min(
        1200px,
        calc(100% - 64px)
    );

    margin: 0 auto;
}


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


.contact-hero {

    position: relative;

    padding:
        140px
        0
        125px;

    background:

        radial-gradient(
            circle at 75% 40%,
            rgba(211, 84, 0, .13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #0b0d10,
            #080a0c
        );

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


.contact-hero::after {

    content: "";

    position: absolute;

    right: 8%;
    bottom: 0;

    width: 1px;
    height: 55%;

    background:
        linear-gradient(
            transparent,
            rgba(211,84,0,.55)
        );
}


.contact-eyebrow {

    margin-bottom: 27px;

    color:
        var(--contact-orange);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .28em;

    text-transform: uppercase;
}


.contact-hero h1 {

    margin: 0;

    max-width: 1000px;

    font-size:
        clamp(
            4rem,
            9vw,
            8rem
        );

    line-height: .82;

    letter-spacing: -.065em;

    font-weight: 900;
}


.contact-hero h1 span {

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255,255,255,.62);
}


.contact-line {

    width: 82px;
    height: 4px;

    margin:
        44px
        0
        30px;

    background:
        var(--contact-orange);
}


.contact-hero p {

    max-width: 650px;

    margin: 0;

    color:
        var(--contact-muted);

    font-size: 1.08rem;

    line-height: 1.8;
}


/* ==========================================================
   MAIN
   ========================================================== */


.contact-main {

    padding:
        130px
        0
        150px;
}


.contact-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(
            60px,
            9vw,
            130px
        );

    align-items: start;
}


/* ==========================================================
   INFORMATION
   ========================================================== */


.contact-number {

    margin-bottom: 25px;

    color:
        var(--contact-orange);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: .72rem;

    letter-spacing: .08em;
}


.contact-info h2 {

    margin:
        0
        0
        35px;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: .88;

    letter-spacing: -.05em;

    font-weight: 900;
}


.contact-info p {

    max-width: 500px;

    margin:
        0
        0
        18px;

    color:
        var(--contact-muted);

    line-height: 1.85;
}


.contact-direct {

    margin-top: 55px;

    padding-top: 25px;

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


.contact-direct span {

    display: block;

    margin-bottom: 12px;

    color:
        var(--contact-muted);

    font-size: .6rem;

    font-weight: 800;

    letter-spacing: .2em;
}


.contact-direct a {

    color: #fff;

    font-size: 1.05rem;

    transition:
        color
        .2s ease;
}


.contact-direct a:hover {

    color:
        var(--contact-orange);
}


.contact-services {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 45px;
}


.contact-services span {

    padding:
        8px
        11px;

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

    color:
        var(--contact-muted);

    font-size: .55rem;

    font-weight: 700;

    letter-spacing: .12em;
}


/* ==========================================================
   FORM PANEL
   ========================================================== */


.contact-form-wrap {

    position: relative;

    padding: 48px;

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

    background:
        var(--contact-panel);
}


.contact-form-wrap::before {

    content: "";

    position: absolute;

    left: -1px;
    top: -1px;

    width: 75px;
    height: 3px;

    background:
        var(--contact-orange);
}


.contact-form {

    display: flex;

    flex-direction: column;

    gap: 29px;
}


.form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 22px;
}


.form-field label {

    display: block;

    margin-bottom: 10px;

    color: #b5b9bd;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    margin: 0;

    padding:
        13px
        4px;

    border: 0;

    border-bottom:
        1px solid
        #343a40;

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #fff;

    font: inherit;

    transition:
        border-color
        .2s ease;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-bottom-color:
        var(--contact-orange);
}


.form-field textarea {

    min-height: 160px;

    resize: vertical;
}


.form-field select {

    cursor: pointer;
}


.form-field select option {

    background:
        var(--contact-panel);

    color: #fff;
}


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


.contact-submit {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin-top: 10px;

    padding:
        19px
        21px;

    border:
        1px solid
        var(--contact-orange);

    border-radius: 0;

    background:
        var(--contact-orange);

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .14em;

    transition:
        background
        .2s ease,
        color
        .2s ease,
        transform
        .2s ease;
}


.contact-submit:hover {

    background: transparent;

    color:
        var(--contact-orange);

    transform:
        translateY(-2px);
}


.contact-submit-arrow {

    font-size: 1.35rem;

    line-height: 1;
}


/* ==========================================================
   SUCCESS
   ========================================================== */


.contact-success {

    min-height: 410px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.contact-success > span {

    color:
        var(--contact-orange);

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .2em;
}


.contact-success h3 {

    margin:
        17px
        0;

    font-size:
        clamp(
            3.5rem,
            7vw,
            5.5rem
        );

    line-height: .9;

    letter-spacing: -.05em;
}


.contact-success p {

    max-width: 450px;

    margin:
        0
        0
        35px;

    color:
        var(--contact-muted);

    line-height: 1.8;
}


.contact-back {

    align-self: flex-start;

    padding-bottom: 6px;

    border-bottom:
        1px solid
        var(--contact-orange);

    color: #fff;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .13em;
}


/* ==========================================================
   ERROR
   ========================================================== */


.contact-error {

    margin-bottom: 30px;

    padding:
        16px
        18px;

    border-left:
        3px solid
        var(--contact-orange);

    background:
        rgba(211,84,0,.08);

    color: #ddd;

    line-height: 1.6;
}


/* ==========================================================
   HONEYPOT
   ========================================================== */


.contact-hp {

    position: absolute !important;

    left: -10000px !important;

    top: auto !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;
}


/* ==========================================================
   BOTTOM
   ========================================================== */


.contact-bottom {

    padding:
        35px
        0;

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

    background:
        var(--contact-dark);
}


.contact-bottom .contact-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    color: #666d73;

    font-size: .58rem;

    font-weight: 800;

    letter-spacing: .16em;
}


.contact-bottom span {

    color:
        var(--contact-orange);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */


@media (max-width: 850px) {

    .contact-container {

        width:
            calc(100% - 36px);
    }


    .contact-hero {

        padding:
            95px
            0
            85px;
    }


    .contact-main {

        padding:
            90px
            0
            100px;
    }


    .contact-grid {

        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .contact-info {

        max-width: 650px;
    }
}


@media (max-width: 560px) {

    .contact-container {

        width:
            calc(100% - 28px);
    }


    .contact-hero {

        padding:
            75px
            0
            70px;
    }


    .contact-hero h1 {

        font-size:
            clamp(
                3.2rem,
                17vw,
                5rem
            );
    }


    .contact-main {

        padding:
            70px
            0
            80px;
    }


    .contact-form-wrap {

        padding:
            34px
            22px;
    }


    .form-row {

        grid-template-columns:
            1fr;
    }


    .contact-submit {

        font-size: .64rem;

        letter-spacing: .1em;
    }


    .contact-bottom .contact-container {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }
}