/* =========================================================
   KONTAKT
   NetSphere Security
   ========================================================= */


/* =========================================================
   STICKY NAVIGATION
   ========================================================= */

.navbar-sentinel {
    width: 100%;
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
}


.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    box-shadow:
        0 0 0 rgba(53, 63, 73, 0);

    transition:
        box-shadow 240ms ease;
}


.navbar.is-stuck {
    box-shadow:
        0 8px 28px rgba(53, 63, 73, 0.10);
}


/* Active Navigation */

.nav-links a.nav-active {
    position: relative;

    color:
        var(--netdark) !important;

    text-decoration:
        none;
}


.nav-links a.nav-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -10px;

    height: 4px;

    border-radius: 2px;

    background-color:
        var(--netgreen);
}


.nav-links a.nav-active:hover {
    color:
        var(--netdark) !important;
}


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

.contact-hero {
    position: relative;

    overflow: hidden;

    padding:
        125px 7vw 115px;

    background-color:
        var(--netwhite);
}


.contact-hero-inner {
    position: relative;
    z-index: 2;

    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.section-kicker {
    display: block;

    margin-bottom:
        24px;

    color:
        var(--netgold);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.76rem;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.contact-hero h1 {
    max-width:
        1200px;

    margin:
        0;

    color:
        var(--netdark);

    font-size:
        clamp(
            3.7rem,
            5.5vw,
            6.5rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.05em;

    line-height:
        1.02;
}


.contact-hero h1 span {
    color:
        var(--netgreen);
}


.contact-intro {
    max-width:
        780px;

    margin:
        45px 0 0;

    color:
        rgba(
            53,
            63,
            73,
            0.72
        );

    font-size:
        1.12rem;

    line-height:
        1.75;
}


/* Brand Accent */

.contact-accent {
    position: absolute;

    right:
        7vw;

    bottom:
        0;

    width:
        160px;

    height:
        7px;

    display:
        flex;
}


.accent-green {
    width:
        75%;

    background-color:
        var(--netgreen);
}


.accent-gold {
    width:
        25%;

    background-color:
        var(--netgold);
}


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

.contact-section {
    padding:
        120px 7vw 145px;

    border-top:
        1px solid rgba(
            53,
            63,
            73,
            0.12
        );

    background-color:
        var(--netwhite);
}


.contact-container {
    width:
        min(100%, 1500px);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(520px, 1.28fr);

    gap:
        clamp(
            80px,
            9vw,
            160px
        );
}


/* =========================================================
   LEFT / DIRECT CONTACT
   ========================================================= */

.contact-details {
    align-self:
        start;
}


.contact-number {
    display:
        block;

    margin-bottom:
        28px;

    color:
        var(--netgold);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.76rem;

    letter-spacing:
        0.16em;
}


.contact-category {
    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--netgreen);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.72rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.contact-details h2,
.form-heading h2 {
    margin:
        0;

    color:
        var(--netdark);

    font-size:
        clamp(
            2.2rem,
            3.1vw,
            3.7rem
        );

    font-weight:
        400;

    letter-spacing:
        -0.045em;

    line-height:
        1.08;
}


.contact-details-intro {
    max-width:
        520px;

    margin:
        30px 0 0;

    color:
        rgba(
            53,
            63,
            73,
            0.70
        );

    font-size:
        0.98rem;

    line-height:
        1.75;
}


/* Contact Lines */

.contact-lines {
    margin-top:
        55px;

    border-top:
        1px solid rgba(
            53,
            63,
            73,
            0.16
        );
}


.contact-line {
    display:
        grid;

    grid-template-columns:
        110px minmax(0, 1fr);

    gap:
        20px;

    padding:
        24px 0;

    border-bottom:
        1px solid rgba(
            53,
            63,
            73,
            0.16
        );
}


.contact-label {
    color:
        rgba(
            53,
            63,
            73,
            0.55
        );

    font-size:
        0.78rem;
}


.contact-line a,
.contact-line > span:last-child {
    color:
        var(--netdark);

    font-size:
        0.9rem;

    line-height:
        1.5;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;
}


.contact-line a {
    transition:
        color 180ms ease;
}


.contact-line a:hover {
    color:
        var(--netgreen);
}


/* =========================================================
   FORM COLUMN
   ========================================================= */

.contact-form-column {
    padding-left:
        clamp(
            40px,
            5vw,
            85px
        );

    border-left:
        1px solid rgba(
            53,
            63,
            73,
            0.14
        );
}


.form-heading {
    max-width:
        650px;

    margin-bottom:
        55px;
}


.form-heading p {
    max-width:
        590px;

    margin:
        25px 0 0;

    color:
        rgba(
            53,
            63,
            73,
            0.68
        );

    font-size:
        0.95rem;

    line-height:
        1.7;
}


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

.contact-form {
    width:
        100%;
}


.form-row {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        30px;
}


.form-field {
    position:
        relative;

    margin-bottom:
        34px;
}


.form-field label {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--netdark);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.72rem;

    letter-spacing:
        0.04em;
}


.form-field label span {
    margin-left:
        5px;

    color:
        rgba(
            53,
            63,
            73,
            0.45
        );

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.68rem;
}


.form-field input,
.form-field select,
.form-field textarea {
    width:
        100%;

    border:
        0;

    border-bottom:
        1px solid rgba(
            53,
            63,
            73,
            0.25
        );

    border-radius:
        0;

    outline:
        none;

    padding:
        13px 2px 15px;

    background-color:
        transparent;

    color:
        var(--netdark);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.95rem;

    transition:
        border-color 180ms ease,
        background-color 180ms ease;
}


.form-field textarea {
    min-height:
        150px;

    resize:
        vertical;

    line-height:
        1.65;
}


.form-field select {
    cursor:
        pointer;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-bottom-color:
        var(--netgreen);

    background-color:
        rgba(
            84,
            138,
            119,
            0.025
        );
}


/* =========================================================
   PRIVACY
   ========================================================= */

.privacy-check {
    max-width:
        720px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-top:
        3px;

    cursor:
        pointer;
}


.privacy-check input {
    width:
        17px;

    height:
        17px;

    flex:
        0 0 auto;

    margin:
        2px 0 0;

    accent-color:
        var(--netgreen);
}


.privacy-check span {
    color:
        rgba(
            53,
            63,
            73,
            0.62
        );

    font-size:
        0.76rem;

    line-height:
        1.6;
}


.privacy-check a {
    color:
        var(--netdark);

    text-decoration-color:
        rgba(
            53,
            63,
            73,
            0.35
        );

    text-underline-offset:
        3px;
}


.privacy-check a:hover {
    color:
        var(--netgreen);
}


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

.contact-submit {
    min-height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        34px;

    margin-top:
        38px;

    padding:
        14px 24px;

    border:
        2px solid
        var(--netgold);

    border-radius:
        6px;

    background-color:
        var(--netgold);

    color:
        var(--netwhite);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.9rem;

    cursor:
        pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.contact-submit:hover {
    background-color:
        transparent;

    color:
        var(--netdark);

    transform:
        translateY(-2px);
}


.submit-arrow {
    font-size:
        1.3rem;

    line-height:
        1;

    transition:
        transform 180ms ease;
}


.contact-submit:hover
.submit-arrow {
    transform:
        translateX(5px);
}


/* =========================================================
   NEXT STEPS
   ========================================================= */

.next-section {
    padding:
        135px 7vw;

    background-color:
        #f6f8f7;
}


.next-container {
    width:
        min(100%, 1500px);

    margin:
        0 auto;
}


.next-heading {
    max-width:
        850px;

    margin-bottom:
        85px;
}


.next-heading h2 {
    margin:
        0;

    color:
        var(--netdark);

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

    font-weight:
        400;

    letter-spacing:
        -0.045em;

    line-height:
        1.06;
}


.next-heading p {
    max-width:
        680px;

    margin:
        30px 0 0;

    color:
        rgba(
            53,
            63,
            73,
            0.68
        );

    font-size:
        0.95rem;

    line-height:
        1.7;
}


/* Steps */

.next-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid rgba(
            53,
            63,
            73,
            0.16
        );
}


.next-item {
    min-height:
        220px;

    padding:
        32px 35px 25px 0;
}


.next-item:not(:last-child) {
    margin-right:
        35px;

    border-right:
        1px solid rgba(
            53,
            63,
            73,
            0.13
        );
}


.next-item > span {
    color:
        var(--netgold);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.72rem;

    letter-spacing:
        0.15em;
}


.next-item h3 {
    margin:
        30px 0 15px;

    color:
        var(--netdark);

    font-size:
        1.35rem;

    font-weight:
        500;
}


.next-item p {
    max-width:
        280px;

    margin:
        0;

    color:
        rgba(
            53,
            63,
            73,
            0.68
        );

    font-size:
        0.92rem;

    line-height:
        1.65;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding:
        40px 7vw;

    background-color:
        #2d363f;

    color:
        rgba(
            255,
            255,
            254,
            0.65
        );
}


.footer-inner {
    width:
        min(100%, 1500px);

    margin:
        0 auto;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        40px;
}


.footer-brand {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    font-size:
        0.8rem;
}


.footer-brand strong {
    color:
        var(--netwhite);

    font-family:
        'Montserrat-Bold',
        sans-serif;

    font-size:
        0.9rem;
}


.footer-links {
    display:
        flex;

    gap:
        30px;
}


.footer-links a {
    color:
        rgba(
            255,
            255,
            254,
            0.65
        );

    font-size:
        0.8rem;

    text-decoration:
        none;

    transition:
        color 180ms ease;
}


.footer-links a:hover {
    color:
        var(--netwhite);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .navbar,
    .navbar.is-stuck {
        position:
            sticky;

        top:
            0;

        box-shadow:
            0 7px 24px rgba(
                53,
                63,
                73,
                0.09
            );
    }


    .contact-hero {
        padding:
            90px 6vw 90px;
    }


    .contact-section {
        padding:
            95px 6vw 110px;
    }


    .contact-container {
        grid-template-columns:
            1fr;

        gap:
            90px;
    }


    .contact-details {
        max-width:
            720px;
    }


    .contact-form-column {
        padding-left:
            0;

        padding-top:
            75px;

        border-left:
            0;

        border-top:
            1px solid rgba(
                53,
                63,
                73,
                0.14
            );
    }


    .next-section {
        padding:
            100px 6vw;
    }


    .next-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .next-item {
        border-bottom:
            1px solid rgba(
                53,
                63,
                73,
                0.13
            );
    }


    .next-item:not(:last-child) {
        margin-right:
            25px;
    }

}


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

@media (max-width: 640px) {

    /* Hero */

    .contact-hero {
        padding:
            70px 20px 70px;
    }


    .contact-hero h1 {
        font-size:
            clamp(
                2.55rem,
                11.5vw,
                3.8rem
            );

        line-height:
            1.04;
    }


    .contact-intro {
        margin-top:
            32px;

        font-size:
            0.96rem;

        line-height:
            1.7;
    }


    .contact-accent {
        right:
            20px;

        width:
            100px;
    }


    /* Contact */

    .contact-section {
        padding:
            80px 20px 90px;
    }


    .contact-container {
        gap:
            75px;
    }


    .contact-details h2,
    .form-heading h2 {
        font-size:
            2.35rem;
    }


    .contact-lines {
        margin-top:
            42px;
    }


    .contact-line {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    /* Form */

    .contact-form-column {
        padding-top:
            65px;
    }


    .form-heading {
        margin-bottom:
            45px;
    }


    .form-row {
        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .form-field {
        margin-bottom:
            30px;
    }


    .contact-submit {
        width:
            100%;

        margin-top:
            34px;
    }


    /* Next */

    .next-section {
        padding:
            85px 20px;
    }


    .next-heading {
        margin-bottom:
            55px;
    }


    .next-heading h2 {
        font-size:
            2.6rem;
    }


    .next-grid {
        grid-template-columns:
            1fr;
    }


    .next-item {
        min-height:
            auto;

        padding:
            30px 0;
    }


    .next-item:not(:last-child) {
        margin-right:
            0;

        border-right:
            0;
    }


    /* Footer */

    .site-footer {
        padding:
            35px 20px;
    }


    .footer-inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            30px;
    }


    .footer-links {
        flex-wrap:
            wrap;

        gap:
            16px 24px;
    }

}


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

@media (max-width: 380px) {

    .contact-hero h1 {
        font-size:
            2.35rem;
    }


    .contact-details h2,
    .form-heading h2 {
        font-size:
            2.15rem;
    }

}