/* ==========================================
   NT CORPORATE SOLUTIONS
   CONTACT PAGE
========================================== */

/* ==========================================
   PAGE VARIABLES
========================================== */

.contact-page{
    --contact-navy:#081b3a;
    --contact-navy-light:#102d5f;
    --contact-gold:#d4af37;
    --contact-gold-dark:#bd9627;
    --contact-white:#ffffff;
    --contact-light:#f8f9fc;
    --contact-text:#555f6d;
    --contact-muted:#667085;
    --contact-border:#e4e8ef;
    --contact-shadow:0 12px 35px rgba(8,27,58,.08);
    --contact-shadow-hover:0 22px 45px rgba(8,27,58,.14);
}

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

.contact-page .contact-hero{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    padding:150px 0 110px;
    background:
        linear-gradient(
            90deg,
            rgba(8,27,58,.96) 0%,
            rgba(8,27,58,.88) 55%,
            rgba(8,27,58,.72) 100%
        ),
        url("../images/contact-banner.jpg") center/cover no-repeat;
    overflow:hidden;
}

.contact-page .contact-hero::after{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-250px;
    width:520px;
    height:520px;
    border:1px solid rgba(212,175,55,.22);
    border-radius:50%;
    pointer-events:none;
}

.contact-page .contact-hero .container{
    position:relative;
    z-index:1;
}

.contact-page .hero-content{
    max-width:850px;
}

.contact-page .hero-label,
.contact-page .section-kicker,
.contact-page .section-title > span,
.contact-page .contact-card-label,
.contact-page .form-label{
    display:inline-block;
    margin-bottom:18px;
    color:var(--contact-gold);
    font-size:.78rem;
    font-weight:800;
    line-height:1.4;
    letter-spacing:2px;
    text-transform:uppercase;
}

.contact-page .contact-hero h1{
    max-width:900px;
    margin-bottom:24px;
    color:var(--contact-white);
    font-size:clamp(2.6rem,5vw,4.5rem);
    font-weight:800;
    line-height:1.08;
}

.contact-page .contact-hero p{
    max-width:780px;
    margin-bottom:38px;
    color:#e3e9f1;
    font-size:1.12rem;
    line-height:1.85;
}

.contact-page .hero-buttons{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.contact-page .contact-hero .btn-outline{
    border-color:var(--contact-white);
    color:var(--contact-white);
}

.contact-page .contact-hero .btn-outline:hover{
    background:var(--contact-white);
    color:var(--contact-navy);
}

/* ==========================================
   SECTION TITLES
========================================== */

.contact-page .section-title{
    max-width:850px;
    margin:0 auto 58px;
    text-align:center;
}

.contact-page .section-title h2{
    margin-bottom:18px;
    color:var(--contact-navy);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    line-height:1.18;
}

.contact-page .section-title p{
    color:var(--contact-muted);
    line-height:1.85;
}

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

.contact-page .contact-section{
    background:var(--contact-light);
}

.contact-page .contact-grid{
    display:grid;
    grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
    gap:40px;
    align-items:start;
}

/* ==========================================
   CONTACT INFORMATION CARD
========================================== */

.contact-page .contact-card{
    position:sticky;
    top:120px;
    padding:42px;
    background:
        linear-gradient(
            145deg,
            var(--contact-navy),
            var(--contact-navy-light)
        );
    border-radius:24px;
    box-shadow:0 20px 45px rgba(8,27,58,.18);
    overflow:hidden;
}

.contact-page .contact-card::after{
    content:"";
    position:absolute;
    right:-110px;
    bottom:-130px;
    width:280px;
    height:280px;
    border:1px solid rgba(212,175,55,.2);
    border-radius:50%;
    pointer-events:none;
}

.contact-page .contact-card > *{
    position:relative;
    z-index:1;
}

.contact-page .contact-card h2{
    margin-bottom:18px;
    color:var(--contact-white);
    font-size:clamp(1.8rem,3vw,2.35rem);
    line-height:1.2;
}

.contact-page .contact-intro{
    margin-bottom:34px;
    color:#dce4ef;
    line-height:1.8;
}

.contact-page .contact-details{
    display:grid;
    gap:0;
}

.contact-page .contact-item{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:16px;
    padding:22px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.contact-page .contact-item:last-child{
    border-bottom:0;
    padding-bottom:0;
}

.contact-page .contact-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    color:var(--contact-navy);
    background:var(--contact-gold);
    border-radius:50%;
    font-size:.76rem;
    font-weight:800;
}

.contact-page .contact-item h3{
    margin-bottom:6px;
    color:var(--contact-white);
    font-size:1rem;
}

.contact-page .contact-item p,
.contact-page .contact-item a{
    color:#dce4ef;
    line-height:1.7;
    word-break:break-word;
}

.contact-page .contact-item a{
    font-weight:600;
    transition:color .3s ease;
}

.contact-page .contact-item a:hover{
    color:var(--contact-gold);
}

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

.contact-page .contact-form-wrapper{
    padding:44px;
    background:var(--contact-white);
    border:1px solid var(--contact-border);
    border-radius:24px;
    box-shadow:var(--contact-shadow);
}

.contact-page .contact-form-wrapper > h2{
    margin-bottom:14px;
    color:var(--contact-navy);
    font-size:clamp(1.8rem,3vw,2.4rem);
}

.contact-page .contact-form-wrapper > p{
    margin-bottom:32px;
    color:var(--contact-muted);
    line-height:1.8;
}

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

.contact-page .contact-form{
    display:grid;
    gap:22px;
}

.contact-page .form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.contact-page .form-group{
    display:grid;
    gap:9px;
}

.contact-page .form-group label{
    color:var(--contact-navy);
    font-size:.92rem;
    font-weight:700;
}

.contact-page .form-group input,
.contact-page .form-group select,
.contact-page .form-group textarea{
    width:100%;
    padding:15px 17px;
    color:#344054;
    background:var(--contact-white);
    border:1px solid #cfd5de;
    border-radius:12px;
    font-family:"Montserrat",sans-serif;
    font-size:.95rem;
    line-height:1.5;
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.contact-page .form-group input::placeholder,
.contact-page .form-group textarea::placeholder{
    color:#98a2b3;
}

.contact-page .form-group input:hover,
.contact-page .form-group select:hover,
.contact-page .form-group textarea:hover{
    border-color:#aab2bf;
}

.contact-page .form-group input:focus,
.contact-page .form-group select:focus,
.contact-page .form-group textarea:focus{
    outline:none;
    border-color:var(--contact-gold);
    box-shadow:0 0 0 4px rgba(212,175,55,.14);
}

.contact-page .form-group textarea{
    min-height:170px;
    resize:vertical;
}

.contact-page .form-group select{
    cursor:pointer;
}

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

.contact-page .form-consent{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:start;
}

.contact-page .form-consent input{
    width:18px;
    height:18px;
    margin-top:3px;
    accent-color:var(--contact-gold);
    cursor:pointer;
}

.contact-page .form-consent label{
    color:var(--contact-muted);
    font-size:.88rem;
    line-height:1.65;
    cursor:pointer;
}

.contact-page .form-submit{
    justify-self:start;
    border:0;
    font-family:"Montserrat",sans-serif;
}

/* ==========================================
   SERVICES QUICK ACCESS
========================================== */

.contact-page .services-request{
    background:var(--contact-white);
}

.contact-page .service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}

.contact-page .service-box{
    position:relative;
    height:100%;
    padding:38px 34px;
    background:var(--contact-white);
    border:1px solid var(--contact-border);
    border-radius:21px;
    box-shadow:var(--contact-shadow);
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.contact-page .service-box::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--contact-gold);
}

.contact-page .service-box:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.5);
    box-shadow:var(--contact-shadow-hover);
}

.contact-page .service-number{
    display:block;
    margin-bottom:26px;
    color:rgba(8,27,58,.15);
    font-size:3.4rem;
    font-weight:800;
    line-height:1;
}

.contact-page .service-box h3{
    margin-bottom:15px;
    color:var(--contact-navy);
    font-size:1.35rem;
}

.contact-page .service-box p{
    margin-bottom:24px;
    color:var(--contact-muted);
    line-height:1.78;
}

.contact-page .text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--contact-navy);
    font-weight:700;
    transition:color .3s ease;
}

.contact-page .text-link::after{
    content:"→";
    color:var(--contact-gold);
    transition:transform .3s ease;
}

.contact-page .text-link:hover{
    color:var(--contact-gold-dark);
}

.contact-page .text-link:hover::after{
    transform:translateX(5px);
}

/* ==========================================
   OFFICE LOCATIONS
========================================== */

.contact-page .office-section{
    background:var(--contact-light);
}

.contact-page .office-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    margin-bottom:38px;
}

.contact-page .office-card{
    padding:34px;
    background:var(--contact-white);
    border:1px solid var(--contact-border);
    border-radius:20px;
    box-shadow:var(--contact-shadow);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.contact-page .office-card:hover{
    transform:translateY(-6px);
    border-color:rgba(212,175,55,.45);
    box-shadow:var(--contact-shadow-hover);
}

.contact-page .office-label{
    display:inline-block;
    margin-bottom:18px;
    padding:7px 13px;
    color:var(--contact-gold-dark);
    background:rgba(212,175,55,.12);
    border-radius:50px;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.contact-page .office-card h3{
    margin-bottom:12px;
    color:var(--contact-navy);
    font-size:1.5rem;
}

.contact-page .office-card address{
    color:var(--contact-muted);
    font-style:normal;
    line-height:1.8;
}

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

.contact-page .map{
    overflow:hidden;
    background:var(--contact-white);
    border:1px solid var(--contact-border);
    border-radius:24px;
    box-shadow:var(--contact-shadow);
}

.contact-page .map iframe{
    display:block;
    width:100%;
}

/* ==========================================
   CALL TO ACTION
========================================== */

.contact-page .cta{
    position:relative;
    padding:100px 0;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            #06152d,
            var(--contact-navy-light)
        );
    overflow:hidden;
}

.contact-page .cta::before{
    content:"";
    position:absolute;
    left:-190px;
    bottom:-270px;
    width:520px;
    height:520px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:50%;
    pointer-events:none;
}

.contact-page .cta .container{
    position:relative;
    z-index:1;
}

.contact-page .cta h2{
    margin-bottom:20px;
    color:var(--contact-white);
    font-size:clamp(2rem,4vw,3.2rem);
}

.contact-page .cta p{
    max-width:820px;
    margin:0 auto 34px;
    color:#dce4ef;
    line-height:1.85;
}

.contact-page .cta-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.contact-page .cta .btn-outline{
    border-color:var(--contact-white);
    color:var(--contact-white);
}

.contact-page .cta .btn-outline:hover{
    background:var(--contact-white);
    color:var(--contact-navy);
}

/* ==========================================
   ACCESSIBILITY
========================================== */

.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible{
    outline:3px solid var(--contact-gold);
    outline-offset:4px;
}

.contact-page section[id]{
    scroll-margin-top:110px;
}

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

@media(max-width:992px){

    .contact-page .contact-hero{
        min-height:570px;
        padding:130px 0 95px;
    }

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

    .contact-page .contact-card{
        position:relative;
        top:auto;
    }

    .contact-page .service-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

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

@media(max-width:768px){

    .contact-page .contact-hero{
        min-height:auto;
        padding:115px 0 80px;
        text-align:center;
        background-position:60% center;
    }

    .contact-page .hero-content{
        margin:0 auto;
    }

    .contact-page .contact-hero p{
        font-size:1rem;
    }

    .contact-page .hero-buttons,
    .contact-page .cta-buttons{
        justify-content:center;
    }

    .contact-page .hero-buttons .btn,
    .contact-page .cta-buttons .btn{
        width:100%;
        max-width:360px;
    }

    .contact-page .form-row,
    .contact-page .service-grid,
    .contact-page .office-grid{
        grid-template-columns:1fr;
    }

    .contact-page .contact-card,
    .contact-page .contact-form-wrapper,
    .contact-page .service-box,
    .contact-page .office-card{
        padding:28px;
    }

    .contact-page .form-submit{
        width:100%;
        justify-self:stretch;
    }

    .contact-page .map iframe{
        height:380px;
    }

    .contact-page .cta{
        padding:75px 0;
    }

}

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

@media(max-width:480px){

    .contact-page .contact-hero{
        padding:105px 0 70px;
    }

    .contact-page .contact-card,
    .contact-page .contact-form-wrapper,
    .contact-page .service-box,
    .contact-page .office-card{
        padding:23px;
        border-radius:17px;
    }

    .contact-page .contact-item{
        grid-template-columns:36px 1fr;
        gap:12px;
    }

    .contact-page .contact-number{
        width:34px;
        height:34px;
    }

    .contact-page .service-number{
        margin-bottom:20px;
        font-size:2.8rem;
    }

    .contact-page .map{
        border-radius:18px;
    }

    .contact-page .map iframe{
        height:320px;
    }

}

/* ==========================================
   REDUCED MOTION
========================================== */

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

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}