/* =========================================================
   CONTACT PAGE
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

    /* -------------------------------- SECTION 2 — CONTACT HEADER  ------------------------------ */
        .contact-header {

            width: 100%;

            display: grid;

            grid-template-columns: 7.5% 34% 58.5%;     /* old values 7.5% 29% 63.5%; */

            min-height:
                395px;

            margin: 0;

            padding: 0;

            overflow: hidden;

            background:
                var(--entrax-white);

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

        }


        /* =========================================================
        LEFT MARKER
        ========================================================= */

        .contact-header-marker {

            position: relative;

            display: flex;

            flex-direction: column;

            align-items: center;

            min-height:
                395px;

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

        }


        /* NUMBER */

        .contact-header-number {

            margin-top:
                75px;

            color:
                var(--color-text-primary);

            font-family:
                var(--font-heading);

            font-size:
                14px;

            font-weight:
                600;

        }


        /* MAIN VERTICAL LINE */

        .contact-header-line {

            width:
                1px;

            height:
                42px;

            margin-top:
                12px;

            background:
                var(--color-text-primary);

            opacity:
                0.65;

        }


        /* =========================================================
        DASHES
        ========================================================= */

        .contact-header-dashes {

            display:
                flex;

            flex-direction:
                column;

            gap:
                8px;

            margin-top:
                14px;

        }


        .contact-header-dashes span {

            width:
                12px;

            height:
                1px;

            background:
                var(--color-border);

        }


        .contact-header-dashes span:first-child {

            background:
                var(--entrax-orange);

        }


        /* =========================================================
        PLUS MARKERS
        ========================================================= */

        .contact-header-plus {

            position:
                absolute;

            bottom:
                48px;

            display:
                flex;

            flex-direction:
                column;

            gap:
                5px;

        }


        .contact-header-plus span {

            color:
                var(--entrax-orange);

            font-family: var(--font-primary);

            font-size:
                14px;

            line-height:
                1;

        }


        /* =========================================================
        CONTENT AREA
        ========================================================= */

        .contact-header-content {

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            min-width:
                0;

            padding:
                45px 48px 42px 46px;

        }


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

        .contact-header-eyebrow {

            display:
                flex;

            align-items:
                center;

            gap:
                13px;

            margin-bottom:
                17px;

        }


        .contact-header-eyebrow span {

            color: var(--entrax-orange);
                font-family: var(--font-heading);
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;

        }


        .contact-header-eyebrow i {

            display:
                block;

            width:
                25px;

            height:
                1px;

            background:
                var(--entrax-orange);

        }


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

        .contact-header-title {

            display: flex;
            flex-direction: column;
            margin: 0;
            color: var(--color-text-primary);
            font-family: var(--font-heading);
            font-size: clamp(38px, 3.2vw, 52px);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: 0.01em;
            text-transform: uppercase;

        }


        .contact-header-title span {

            display:
                block;

        }


        .contact-header-title .accent {

            color:
                var(--entrax-orange);

        }


        /* =========================================================
        DESCRIPTION
        ========================================================= */

        .contact-header-description {

            max-width: 455px;
            margin: 24px 0 0;
            color: var(--color-text-primary);
            font-family: var(--font-body);
            font-size: 13.5px;
            font-weight: 400;
            line-height: 1.55;

        }


        /* =========================================================
        DIVIDER
        ========================================================= */

        .contact-header-divider {

            width:
                24px;

            height:
                1px;

            margin-top:
                25px;

            background:
                var(--entrax-orange);

        }


        /* =========================================================
        CTA
        ========================================================= */

        .contact-header-cta {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;

            width:
                fit-content;

            margin-top:
                22px;

            color:
                var(--color-text-primary);

            font-family:
                var(--font-heading);

            font-size:
                13px;

            font-weight:
                600;

            letter-spacing:
                0.025em;

            text-decoration:
                none;

            text-transform:
                uppercase;

            transition:
                color 0.25s ease;

        }


        .contact-header-cta:hover {

            color:
                var(--entrax-orange);

        }


        .contact-header-arrow {

            color:
                var(--entrax-orange);

            font-size:
                25px;

            font-weight:
                300;

            line-height:
                1;

            transition:
                transform 0.25s ease;

        }


        .contact-header-cta:hover
        .contact-header-arrow {

            transform:
                translateX(5px);

        }


        /* =========================================================
        RIGHT VISUAL
        ========================================================= */

        .contact-header-visual {

            position:
                relative;

            min-width:
                0;

            min-height:
                395px;

            overflow:
                hidden;

            background:
                var(--entrax-dark-navy);

        }


        /* =========================================================
        BUILDING IMAGE
        ========================================================= */

        .contact-header-building {

            position:
                absolute;

            inset:
                0;

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            object-position:
                center;

        }


        /* =========================================================
        BLUEPRINT OVERLAY
        ========================================================= */

        .contact-header-blueprint {

            position:
                absolute;

            inset:
                0;

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            object-position:
                center;

            pointer-events:
                none;

        }


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

        .contact-header-statement {

            position:
                absolute;

            right:
                8%;

            top:
                50%;

            transform:
                translateY(-50%);

            width:
                120px;

            z-index:
                3;

        }


        .contact-header-statement-line {

            width:
                24px;

            height:
                2px;

            margin-bottom:
                15px;

            background:
                var(--entrax-orange);

        }


        .contact-header-statement p {

            margin:
                0;

            color:
                var(--entrax-white);

            font-family:
                var(--font-body);

            font-size:
                14px;

            font-weight:
                500;

            line-height:
                1.7;

        }


        .contact-header-statement p span {

            color:
                var(--entrax-orange);

        }





    /* ------------------------------ SECTION 3 — CONTACT INFORMATION ------------------------------ */
        .contact-information {

            width: 100%;

            background:
                var(--entrax-white);

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

        }


        .contact-information-inner {
            width: 100%;
            display: grid;
            grid-template-columns: 24% 40% 36%;
            align-items: stretch;
            padding: 44px 5.2% 42px;
            box-sizing: border-box;
        }


        /* =========================================================
        SECTION HEADING
        ========================================================= */

        .section-heading {

            margin-bottom:
                18px;

        }


        .section-heading h2 {

            margin: 0;
            color: var(--color-text-primary);
            font-family: var(--font-heading);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.04em;
            text-transform: uppercase;

        }


        .section-heading span {

            display:
                block;

            width:
                24px;

            height:
                1px;

            margin-top:
                14px;

            background:
                var(--entrax-orange);

        }


        /* =========================================================
        CONTACT INFORMATION COLUMN
        ========================================================= */

        .contact-info-column {
            display: flex;
            flex-direction: column;

            height: 100%;
            padding-right: 42px;

            border-right: 1px solid var(--color-border);
            box-sizing: border-box;
        }


        .contact-detail {

            display:
                flex;

            align-items:
                flex-start;

            gap:
                20px;

            margin-top:
                26px;

        }


        .contact-detail-icon {

            width:
                28px;

            min-width:
                28px;

            height:
                32px;

            display:
                flex;

            align-items:
                flex-start;

            justify-content:
                center;

        }


        .contact-detail-icon img {

            display:
                block;

            width:
                28px;

            height:
                32px;

            object-fit:
                contain;

        }


        .contact-detail-content {

            min-width:
                0;

        }


        .contact-detail-content h3 {

            margin: 0 0 4px;
            color: var(--color-text-primary);
            font-family: var(--font-heading);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.03em;
            text-transform: uppercase;

        }


        .contact-detail-content p {

            margin: 0;
            color: var(--color-text-primary);
            font-family: var(--font-body);
            font-size: 12.5px;
            font-weight: 400;
            line-height: 1.5;

        }


        .contact-detail-content a {

            color:
                inherit;

            text-decoration:
                none;

        }


        .contact-detail-content a:hover {

            color:
                var(--entrax-orange);

        }


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

        .contact-form-column {
            display: flex;
            flex-direction: column;

            height: 100%;
            padding: 0 42px;

            box-sizing: border-box;
        }


        .contact-form {
            position: relative;

            display: flex;
            flex-direction: column;

            height: 100%;
        }


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

        .form-row {

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                14px;

            margin-bottom:
                9px;

        }


        .form-field {

            position:
                relative;

        }


        .form-field-full {

            margin-bottom:
                9px;

        }


        /* =========================================================
        FLOATING LABEL
        ========================================================= */

        .form-field {
    position: relative;
}


/* ---------------------------------------------------------
   DEFAULT LABEL
   --------------------------------------------------------- */

.form-field label {

    position: absolute;

    top: 50%;
    left: 14px;

    transform: translateY(-50%);

    z-index: 2;

    padding: 0 4px;

    color: #344454;

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;

    pointer-events: none;

    background: transparent;

    transition:
        top 0.18s ease,
        left 0.18s ease,
        transform 0.18s ease,
        font-size 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}


/* ---------------------------------------------------------
   FLOAT LABEL

   When:
   1. Field is focused
   2. Field contains a value
   --------------------------------------------------------- */

.form-field.is-focused label,
.form-field.has-value label {

    top: -6px;

    left: 9px;

    transform: none;

    padding: 0 5px;

    background: #FFFFFF;

    color: var(--entrax-orange);

    font-size: 10px;
}


        /* =========================================================
        INPUT / TEXTAREA
        ========================================================= */

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

            width: 100%;

            box-sizing: border-box;

            border: 1px solid #D8DEE4;

            border-radius: 0;

            background: #FFFFFF;

            color: var(--color-text-primary);

            font-family: var(--font-body);

            font-size: 12px;

            outline: none;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;

        }


        .form-field input {

            height: 36px;

            padding: 0 13px;

        }


        .form-field textarea {
            min-height: 86px;
            padding: 13px;
            resize: vertical;
            box-sizing: border-box;
        }

        /* ------- the button and required note must stay at the bottom. ----*/

        .contact-submit {
            flex-shrink: 0;
        }

        .required-note {
            flex-shrink: 0;
        }

        .form-status {
            flex-shrink: 0;
        }


        /* =========================================================
        MESSAGE FIELD 
        ========================================================= */
        .message-field {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .message-field textarea {
            flex: 1;
            min-height: 150px;
        }



        /* =========================================================
        MESSAGE FIELD — FILL AVAILABLE FORM HEIGHT
        ========================================================= */

        .form-field-full:has(#message) {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .form-field-full:has(#message) textarea {
            flex: 1;
            min-height: 150px;
        }


        /* =========================================================
        FOCUS
        ========================================================= */

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

            border-color: var(--entrax-orange);

            box-shadow:
                0 0 0 1px var(--entrax-orange);

        }


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

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

            border-color: var(--entrax-orange);

            box-shadow:
                0 0 0 1px var(--entrax-orange);

        }


        .form-field.has-error label {

            color: var(--entrax-orange);

        }







        /* Move label out of the field */

        /* .form-field input:focus + label,
        .form-field textarea:focus + label {

            top:
                -6px;

            left:
                9px;

            transform:
                none;

            padding:
                0 5px;

            background:
                #FFFFFF;

            color:
                var(--entrax-orange);

            font-size:
                10px;

        } */


        /* =========================================================
        VALIDATION
        ========================================================= */

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

            border-color:
                var(--entrax-orange);

            box-shadow:
                0 0 0 1px var(--entrax-orange);

        }


        .form-field.has-error label {

            color:
                var(--entrax-orange);

        }


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

        .contact-submit {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                30px;

            min-width:
                177px;

            height:
                38px;

            padding:
                0 18px;

            margin-top:
                0;

            border:
                0;

            border-radius:
                0;

            background:
                var(--entrax-orange);

            color:
                #FFFFFF;

            font-family: var(--font-heading);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.05em;

            cursor:
                pointer;

            transition:
                background 0.2s ease,
                transform 0.2s ease;

        }


        .contact-submit:hover {

            background:
                #D94E1D;

        }


        .contact-submit:disabled {

            opacity:
                0.65;

            cursor:
                not-allowed;

        }


        .contact-submit-arrow {

            font-size:
                21px;

            font-weight:
                300;

        }


        /* =========================================================
        REQUIRED NOTE
        ========================================================= */

        .required-note {

            margin:
                12px 0 0;

            color:
                var(--color-text-secondary);

            font-family:
                var(--font-body);

            font-size:
                11px;

        }





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

        .form-status {

            min-height:
                18px;

            margin:
                6px 0 0;

            font-family:
                var(--font-body);

            font-size:
                11px;

            line-height:
                1.4;

        }


        .form-status.success {

            color:
                #2C6B45;

        }


        .form-status.error {

            color:
                var(--entrax-orange);

        }


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

        .contact-honeypot {

            position:
                absolute;

            left:
                -9999px;

            width:
                1px;

            height:
                1px;

            overflow:
                hidden;

        }


        /* =========================================================
        MAP COLUMN
        ========================================================= */

        .contact-map-column {

            padding-left:
                42px;

        }


        .contact-map {
            width: 100%;
            height: 360px;
            overflow: hidden;
        }

        .contact-map iframe {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }


        /* =========================================================
        MAP NOTE
        ========================================================= */

        .contact-map-note {

            display:
                flex;

            align-items:
                center;

            gap:
                14px;

            min-height:
                70px;

            margin-top:
                10px;

            padding:
                12px 18px;

            box-sizing:
                border-box;

            background:
                #F1F3F5;

        }


        .contact-map-note > span {

            display:
                block;

            width:
                1px;

            height:
                34px;

            background:
                var(--entrax-orange);

        }


        .contact-map-note p {

            margin:
                0;

            color:
                var(--color-text-primary);

            font-family:
                var(--font-body);

            font-size:
                12px;

            line-height:
                1.55;

        }




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

@media (max-width: 1100px) {


        /* ------------------------------ SECTION 2 — CONTACT HEADER ------------------------------ */
        .contact-header {

            grid-template-columns: 7% 38% 55%;    /* old values  7% 36% 57%; */

            min-height:
                350px;

        }


        .contact-header-marker {

            min-height:
                350px;

        }


        .contact-header-number {

            margin-top:
                60px;

        }


        .contact-header-content {

            padding:
                38px 30px;

        }


        .contact-header-eyebrow span {

            font-size:
                12px;

        }


        .contact-header-title {

            font-size:
                clamp(30px, 3.4vw, 42px);

            line-height:
                0.98;

        }


        .contact-header-description {

            max-width:
                360px;

            margin-top:
                22px;

            font-size:
                13px;

        }


        .contact-header-divider {

            margin-top:
                20px;

        }


        .contact-header-cta {

            margin-top:
                18px;

            font-size:
                12px;

        }


        .contact-header-visual {

            min-height:
                350px;

        }


        .contact-header-statement {

            right:
                6%;

            width:
                90px;

        }


        .contact-header-statement p {

            font-size:
                12px;

        }
        /* ------------------------------ SECTION 3 — CONTACT INFORMATION ------------------------------ */
            .contact-information-inner {

            grid-template-columns:
                1fr 1.35fr;

            gap:
                0;

            padding:
                40px 5%;

        }


        .contact-info-column {

            padding-right:
                30px;

        }


        .contact-form-column {

            padding:
                0 0 0 30px;

        }


        .contact-map-column {

            grid-column:
                1 / -1;

            padding:
                35px 0 0;

            margin-top:
                35px;

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

        }

        /* =====================================================
        SECTION 3 — CONTACT INFORMATION
        TABLET
        ===================================================== */

        .contact-information-inner {
            align-items: stretch;
        }

        .contact-info-column,
        .contact-form-column {
            height: auto;
        }

        .contact-form {
            height: auto;
        }

        .form-field-full:has(#message) {
            flex: none;
            display: block;
        }

        .form-field-full:has(#message) textarea {
            flex: none;
            min-height: 120px;
        }





        /* ------ Tablet - styling Message field ----- */
        .message-field {
            flex: none;
            display: block;
        }

        .message-field textarea {
            flex: none;
            min-height: 120px;
        }






            /* ------ Tablet - styling Map ----- */

            .contact-map {
                height: 380px;
            }

            .contact-map iframe {
                width: 100%;
                height: 100%;
            }


        .contact-map-note {

            max-width:
                100%;

        }


        .form-row {

            gap:
                10px;

        }




}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {

        /* ------------------------------ SECTION 2 — CONTACT HEADER ------------------------------ */
        /* =====================================================
        MAIN HEADER
        ====================================================== */

        .contact-header {

            display:
                flex;

            flex-direction:
                column;

            width:
                100%;

            min-height:
                0;

            margin:
                0;

        }


        /* =====================================================
        LEFT MARKER
        ====================================================== */

        .contact-header-marker {

            display:
                none;

        }


        /* =====================================================
        CONTENT
        ====================================================== */

        .contact-header-content {

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                flex-start;

            width:
                100%;

            padding:
                48px
                var(--content-padding-mobile)
                42px;

        }


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

        .contact-header-eyebrow {

            margin-bottom:
                15px;

        }


        .contact-header-eyebrow span {

            font-size:
                11px;

        }


        .contact-header-eyebrow i {

            width:
                20px;

        }


        /* =====================================================
        TITLE
        ====================================================== */

        .contact-header-title {

            font-size:
                clamp(36px, 10vw, 48px);

            line-height:
                0.99;

            letter-spacing:
                -0.02em;

        }


        /* =====================================================
        DESCRIPTION
        ====================================================== */

        .contact-header-description {

            max-width:
                100%;

            margin-top:
                24px;

            font-size:
                13px;

            line-height:
                1.65;

        }


        /* =====================================================
        DIVIDER
        ====================================================== */

        .contact-header-divider {

            margin-top:
                22px;

        }


        /* =====================================================
        CTA
        ====================================================== */

        .contact-header-cta {

            margin-top:
                18px;

            font-size:
                12px;

        }


        .contact-header-arrow {

            font-size:
                23px;

        }


        /* =====================================================
        VISUAL
        ====================================================== */

        .contact-header-visual {

            width:
                100%;

            min-height:
                330px;

        }


        /* =====================================================
        BUILDING
        ====================================================== */

        .contact-header-building {

            object-position:
                center center;

        }


        /* =====================================================
        BLUEPRINT
        ====================================================== */

        .contact-header-blueprint {

            object-position:
                center center;

        }


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

        .contact-header-statement {

            right:
                22px;

            top:
                auto;

            bottom:
                30px;

            transform:
                none;

            width:
                105px;

        }


        .contact-header-statement-line {

            width:
                20px;

            margin-bottom:
                10px;

        }


        .contact-header-statement p {

            font-size:
                11px;

            line-height:
                1.55;

        }




        /* ------------------------------ SECTION 3 — CONTACT INFORMATION ------------------------------ */
        .contact-information-inner {

            display:
                flex;

            flex-direction:
                column;

            padding:
                42px var(--content-padding-mobile);

        }


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

        .contact-info-column {

            width:
                100%;

            padding:
                0 0 35px;

            border-right:
                0;

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

        }


        .contact-detail {

            gap:
                16px;

            margin-top:
                24px;

        }


        .contact-detail-icon,
        .contact-detail-icon img {

            width:
                27px;

            min-width:
                27px;

            height:
                30px;

        }


        .contact-detail-content h3 {

            font-size:
                11px;

        }


        .contact-detail-content p {

            font-size:
                12px;

        }


            /* =====================================================
            SECTION 3 — CONTACT INFORMATION
            SMARTPHONE
            ===================================================== */

            .contact-info-column,
            .contact-form-column,
            .contact-map-column {
                height: auto;
            }

            .contact-form {
                height: auto;
            }

            .form-field-full:has(#message) {
                flex: none;
                display: block;
            }

            .form-field-full:has(#message) textarea {
                flex: none;
                min-height: 120px;
            }




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

        .contact-form-column {

            width:
                100%;

            padding:
                38px 0;

        }


        .form-row {

            display:
                flex;

            flex-direction:
                column;

            gap:
                9px;

            margin-bottom:
                9px;

        }


        .form-field input {

            height:
                44px;

            font-size:
                13px;

        }


        .form-field textarea {

            min-height:
                120px;

            font-size:
                13px;

        }


        .form-field label {

            font-size:
                13px;

        }


        .contact-submit {

            min-width:
                185px;

            min-height:
                44px;

            margin-top:
                4px;

        }


        .required-note {

            margin-top:
                13px;

        }


        .message-field {
            flex: none;
            display: block;
        }

        .message-field textarea {
            flex: none;
            min-height: 120px;
        }


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

        .contact-map-column {

            width:
                100%;

            padding:
                38px 0 0;

            margin:
                0;

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

        }


        .contact-map {
            height: 300px;
            width: 100%;
        }

        .contact-map iframe {
            width: 100%;
            height: 100%;
        }


        .contact-map-note {

            min-height:
                82px;

            padding:
                14px;

        }


        .contact-map-note p {

            font-size:
                12px;

        }



}


/* =========================================================
   VERY SMALL SMARTPHONES
   ========================================================= */

@media (max-width: 380px) {


    /* ------------------------------ Contact Header Section  ------------------------------ */
    .contact-header-content {

        padding:
            40px 18px 36px;

    }


    .contact-header-title {

        font-size:
            34px;

    }


    .contact-header-description {

        font-size:
            12px;

    }


    .contact-header-visual {

        min-height:
            290px;

    }


    .contact-header-statement {

        right:
            18px;

        bottom:
            22px;

    }


    /* ------------------------------ Contact information Section  ------------------------------ */

       .contact-information-inner {

        padding:
            36px 18px;

    }


    .contact-detail {

        gap:
            13px;

    }


    .contact-detail-content p {

        font-size:
            11px;

    }


    .contact-map {

        height:
            250px;

    }





}