/* =========================================================
   DOORWAY SOLUTION
   CONTACT PAGE
========================================================= */


/* =========================================================
   01 — VARIABLES
========================================================= */

:root {

    --brand-blue: #3f4198;
    --brand-blue-light: #5558bd;
    --brand-blue-dark: #292b72;

    --charcoal: #242124;

    --white: #ffffff;

    --light: #f5f5f7;
    --light-alt: #eeeeF2;

    --text-muted: #6d6e77;

    --border:
        rgba(36, 33, 36, .12);

    --heading:
        "Manrope",
        sans-serif;

    --body:
        "Inter",
        sans-serif;

    --container:
        1400px;
}


/* =========================================================
   02 — RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    overflow-x: hidden;

    color:
        var(--charcoal);

    background:
        var(--light);

    font-family:
        var(--body);

    -webkit-font-smoothing:
        antialiased;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   03 — CONTAINER
========================================================= */

.contact-container {

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

    margin:
        0 auto;
}


/* =========================================================
   04 — HERO
========================================================= */

.contact-hero {

    position:
        relative;

    min-height:
        72vh;

    padding:
        175px 0
        105px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f7f7f9 0%,
            #eeeeF2 100%
        );
}


/* subtle architectural grid */

.contact-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .46;

    background-image:
        linear-gradient(
            rgba(36,33,36,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36,33,36,.025) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;
}


/* blue line */

.contact-hero::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        10%;

    width:
        1px;

    height:
        100%;

    background:
        linear-gradient(
            transparent,
            rgba(63,65,152,.14),
            transparent
        );
}


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

.contact-hero-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(280px,.65fr);

    align-items:
        end;

    gap:
        clamp(
            60px,
            7vw,
            120px
        );
}


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

.contact-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        var(--brand-blue);
}


.contact-eyebrow > span {

    width:
        36px;

    height:
        1px;

    background:
        var(--brand-blue);
}


.contact-eyebrow strong {

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


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

.contact-hero h1 {

    max-width:
        950px;

    margin:
        43px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            62px,
            7vw,
            108px
        );

    font-weight:
        500;

    line-height:
        .91;

    letter-spacing:
        -.065em;
}


.contact-hero h1 span {

    display:
        block;

    color:
        var(--brand-blue);
}


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

.contact-hero-text {

    max-width:
        390px;

    padding-bottom:
        8px;
}


.contact-hero-text p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.75;
}


.contact-hero-text a {

    width:
        min(
            100%,
            280px
        );

    margin-top:
        32px;

    padding-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    border-bottom:
        1px solid
        rgba(36,33,36,.18);

    font-size:
        12px;

    font-weight:
        650;

    transition:
        color .25s ease,
        border-color .25s ease;
}


.contact-hero-text a strong {

    color:
        var(--brand-blue);

    font-size:
        17px;

    font-weight:
        400;

    transition:
        transform .25s ease;
}


@media (hover:hover) and (pointer:fine) {

    .contact-hero-text a:hover {

        color:
            var(--brand-blue);

        border-color:
            var(--brand-blue);
    }


    .contact-hero-text a:hover strong {

        transform:
            translateY(4px);
    }

}


/* =========================================================
   05 — COMMON SECTION LABEL
========================================================= */

.contact-section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.contact-section-label > span {

    color:
        var(--brand-blue);

    font-size:
        10px;

    font-weight:
        700;
}


.contact-section-label p {

    margin:
        0;

    color:
        rgba(36,33,36,.55);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


/* =========================================================
   06 — CONTACT DETAILS
========================================================= */

.contact-details {

    padding:
        90px 0;

    background:
        #ffffff;
}


.contact-details-grid {

    margin-top:
        42px;

    display:
        grid;

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

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

    border-left:
        1px solid
        var(--border);
}


/* =========================================================
   CONTACT DETAIL ITEM
========================================================= */

.contact-detail-item {

    position:
        relative;

    min-height:
        180px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

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

    background:
        #ffffff;

    transition:
        background .3s ease;
}


.contact-detail-item small {

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.contact-detail-item h3 {

    max-width:
        350px;

    margin:
        35px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            21px,
            2vw,
            28px
        );

    font-weight:
        500;

    line-height:
        1.15;

    letter-spacing:
        -.035em;

    overflow-wrap:
        anywhere;
}


.contact-detail-item > span {

    position:
        absolute;

    top:
        28px;

    right:
        28px;

    color:
        var(--brand-blue);

    font-size:
        17px;

    transition:
        transform .25s ease;
}


@media (hover:hover) and (pointer:fine) {

    a.contact-detail-item:hover {

        background:
            var(--light);
    }


    a.contact-detail-item:hover > span {

        transform:
            translate(
                3px,
                -3px
            );
    }

}


/* =========================================================
   07 — FORM + MAP SECTION
========================================================= */

.contact-main {

    padding:
        115px 0;

    background:
        var(--light);
}


.contact-main-grid {

    display:
        grid;

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

    align-items:
        stretch;

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

    background:
        #ffffff;
}


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

.contact-form-wrap {

    padding:
        clamp(
            45px,
            5vw,
            76px
        );

    background:
        #ffffff;
}


.contact-form-wrap h2 {

    max-width:
        590px;

    margin:
        38px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            48px,
            4.8vw,
            74px
        );

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.055em;
}


.contact-form-wrap h2 span {

    display:
        block;

    color:
        var(--brand-blue);
}


.contact-form-intro {

    max-width:
        440px;

    margin:
        24px 0 0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.75;
}


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

.contact-form {

    margin-top:
        42px;
}


.contact-form-field {

    margin-bottom:
        25px;
}


.contact-form-field label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(36,33,36,.55);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


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

    width:
        100%;

    padding:
        14px 0;

    color:
        var(--charcoal);

    background:
        transparent;

    border:
        0;

    border-bottom:
        1px solid
        rgba(36,33,36,.17);

    border-radius:
        0;

    outline:
        none;

    resize:
        none;

    transition:
        border-color .25s ease;
}


.contact-form-field textarea {

    min-height:
        110px;
}


.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {

    color:
        rgba(36,33,36,.33);
}


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

    border-color:
        var(--brand-blue);
}


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

.contact-submit {

    width:
        100%;

    min-height:
        60px;

    margin-top:
        9px;

    padding:
        0 19px
        0 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    color:
        #ffffff;

    background:
        var(--brand-blue);

    border:
        0;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        650;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.contact-submit strong {

    font-size:
        18px;

    font-weight:
        400;

    transition:
        transform .25s ease;
}


@media (hover:hover) and (pointer:fine) {

    .contact-submit:hover {

        background:
            var(--brand-blue-dark);

        transform:
            translateY(-2px);

        box-shadow:
            0 14px 28px
            rgba(41,43,114,.15);
    }


    .contact-submit:hover strong {

        transform:
            translate(
                3px,
                -3px
            );
    }

}


/* =========================================================
   08 — MAP SIDE
========================================================= */

.contact-map-wrap {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--light-alt);
}


.contact-map {

    position:
        relative;

    flex:
        1;

    min-height:
        560px;

    overflow:
        hidden;

    background:
        #e1e2e7;
}


.contact-map iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


/* =========================================================
   MAP INFO
========================================================= */

.contact-map-info {

    min-height:
        180px;

    padding:
        30px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;

    background:
        var(--charcoal);

    color:
        #ffffff;
}


.contact-map-info > div {

    max-width:
        390px;
}


.contact-map-info > div > span {

    display:
        block;

    color:
        var(--brand-blue-light);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.contact-map-info h3 {

    margin:
        16px 0 0;

    font-family:
        var(--heading);

    font-size:
        25px;

    font-weight:
        500;

    line-height:
        1.1;
}


.contact-map-info p {

    margin:
        9px 0 0;

    color:
        rgba(255,255,255,.55);

    font-size:
        12px;

    line-height:
        1.6;
}


.contact-map-info > a {

    padding-bottom:
        7px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    flex-shrink:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.3);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

    transition:
        border-color .25s ease,
        color .25s ease;
}


.contact-map-info > a strong {

    color:
        var(--brand-blue-light);

    font-size:
        16px;

    font-weight:
        400;

    transition:
        transform .25s ease;
}


@media (hover:hover) and (pointer:fine) {

    .contact-map-info > a:hover {

        color:
            var(--brand-blue-light);

        border-color:
            var(--brand-blue-light);
    }


    .contact-map-info > a:hover strong {

        transform:
            translate(
                3px,
                -3px
            );
    }

}


/* =========================================================
   09 — CTA
========================================================= */

.contact-cta {

    padding:
        110px 0;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #11131a 0%,
            #151823 52%,
            #0e1017 100%
        );
}


.contact-cta-inner {

    padding-top:
        35px;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(280px,.75fr);

    align-items:
        end;

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

    border-top:
        1px solid
        rgba(255,255,255,.12);
}


.contact-cta-label {

    color:
        var(--brand-blue-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.contact-cta h2 {

    max-width:
        850px;

    margin:
        40px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            50px,
            5.5vw,
            84px
        );

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.06em;
}


.contact-cta h2 span {

    display:
        block;

    color:
        var(--brand-blue-light);
}


/* CTA right */

.contact-cta-action p {

    max-width:
        390px;

    margin:
        0;

    color:
        rgba(255,255,255,.54);

    font-size:
        14px;

    line-height:
        1.75;
}


.contact-cta-action a {

    min-height:
        58px;

    margin-top:
        27px;

    padding:
        0 18px
        0 21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    color:
        #ffffff;

    background:
        var(--brand-blue);

    font-size:
        12px;

    font-weight:
        650;

    transition:
        background .25s ease,
        transform .25s ease;
}


.contact-cta-action a strong {

    font-size:
        17px;

    font-weight:
        400;

    transition:
        transform .25s ease;
}


@media (hover:hover) and (pointer:fine) {

    .contact-cta-action a:hover {

        background:
            var(--brand-blue-light);

        transform:
            translateY(-3px);
    }


    .contact-cta-action a:hover strong {

        transform:
            translate(
                3px,
                -3px
            );
    }

}


/* =========================================================
   10 — TABLET
   UP TO 1024PX
========================================================= */

@media (max-width: 1024px) {


    .contact-container {

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



    /* Hero */

    .contact-hero {

        min-height:
            auto;

        padding:
            150px 0
            90px;
    }


    .contact-hero-grid {

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

        gap:
            42px;
    }


    .contact-hero-text {

        max-width:
            560px;
    }



    /* contact details */

    .contact-details {

        padding:
            80px 0;
    }


    .contact-details-grid {

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



    /* form + map */

    .contact-main {

        padding:
            90px 0;
    }


    .contact-main-grid {

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


    .contact-form-wrap {

        order:
            1;
    }


    .contact-map-wrap {

        order:
            2;
    }


    .contact-map {

        min-height:
            480px;
    }



    /* CTA */

    .contact-cta {

        padding:
            90px 0;
    }


    .contact-cta-inner {

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

        gap:
            40px;
    }


    .contact-cta-action {

        max-width:
            520px;
    }

}


/* =========================================================
   11 — MOBILE
   UP TO 767PX
========================================================= */

@media (max-width: 767px) {


    .contact-container {

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



    /* hero */

    .contact-hero {

        padding:
            125px 0
            70px;
    }


    .contact-hero-grid {

        gap:
            34px;
    }



    /* contact details */

    .contact-details {

        padding:
            68px 0;
    }


    .contact-details-grid {

        margin-top:
            32px;

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


    .contact-detail-item {

        min-height:
            145px;

        padding:
            24px 20px;
    }


    .contact-detail-item h3 {

        margin-top:
            28px;
    }


    .contact-detail-item > span {

        top:
            22px;

        right:
            20px;
    }



    /* main */

    .contact-main {

        padding:
            72px 0;
    }


    .contact-main-grid {

        border:
            0;
    }


    .contact-form-wrap {

        padding:
            42px 20px;
    }


    .contact-form {

        margin-top:
            34px;
    }



    /* map */

    .contact-map {

        min-height:
            390px;
    }


    .contact-map-info {

        min-height:
            0;

        padding:
            26px 20px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            24px;
    }



    /* CTA */

    .contact-cta {

        padding:
            72px 0;
    }


    .contact-cta-inner {

        padding-top:
            28px;

        gap:
            34px;
    }


    .contact-cta-action {

        width:
            100%;

        max-width:
            none;
    }


    .contact-cta-action a {

        width:
            100%;
    }

}


/* =========================================================
   12 — SMALL MOBILE
========================================================= */

@media (max-width: 390px) {


    .contact-container {

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


    .contact-form-wrap {

        padding:
            36px 17px;
    }


    .contact-map {

        min-height:
            340px;
    }


    .contact-map-info {

        padding:
            24px 17px;
    }

}


/* =========================================================
   13 — FORM ERROR / STATUS
========================================================= */

.contact-form-field input.field-error,
.contact-form-field textarea.field-error {

    border-color:
        #c74a4a;
}


.contact-form-status {

    margin:
        17px 0 0;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   14 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


    html {

        scroll-behavior:
            auto;
    }


    .contact-hero-text a,
    .contact-hero-text a strong,
    .contact-detail-item,
    .contact-detail-item > span,
    .contact-submit,
    .contact-submit strong,
    .contact-map-info > a,
    .contact-map-info > a strong,
    .contact-cta-action a,
    .contact-cta-action a strong {

        transition:
            none !important;
    }

}
/* =========================================================
   CONTACT INFO SECTION
========================================================= */

.contact-info-section {
    padding: 110px 0 90px;
    background: #f5f5f7;
}

.contact-container {
    width: min(calc(100% - 48px), 1400px);
    margin: 0 auto;
}

.contact-section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
    color: rgba(36, 33, 36, 0.55);
}

.contact-section-label span {
    color: #3f4198;
    font-size: 14px;
    font-weight: 700;
}

.contact-section-label p {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(36, 33, 36, 0.12);
    border-left: 1px solid rgba(36, 33, 36, 0.12);
    background: #ffffff;
}

.contact-info-card {
    position: relative;
    min-height: 235px;
    padding: 32px 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border-right: 1px solid rgba(36, 33, 36, 0.12);
    border-bottom: 1px solid rgba(36, 33, 36, 0.12);
    transition: background 0.3s ease, transform 0.3s ease;
}

.contact-info-card small {
    display: block;
    color: rgba(63, 65, 152, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-info-card strong {
    display: block;
    max-width: 95%;
    color: #242124;
    font-family: "Manrope", sans-serif;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-card-arrow {
    position: absolute;
    top: 32px;
    right: 28px;
    color: #3f4198;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.contact-info-card:hover {
    background: #fafafe;
}

.contact-info-card:hover .contact-card-arrow {
    transform: translate(3px, -3px);
}
@media (max-width: 1024px) {
    .contact-info-card {
        min-height: 210px;
        padding: 28px 24px;
    }

    .contact-info-card strong {
        font-size: clamp(22px, 2.5vw, 30px);
    }
}
@media (max-width: 767px) {
    .contact-info-section {
        padding: 80px 0 70px;
    }

    .contact-container {
        width: min(calc(100% - 28px), 1400px);
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        min-height: 170px;
        padding: 24px 20px;
    }

    .contact-info-card strong {
        max-width: 100%;
        font-size: 20px;
        line-height: 1.28;
    }

    .contact-card-arrow {
        top: 24px;
        right: 20px;
        font-size: 16px;
    }
}