:root{
    --primary:#001E38;
    --primary-dark:#001426;
    --primary-light:#06365a;

    --gold:#D6AF45;
    --gold-bright:#F0CC72;

    --white:#fff;
    --text:#44515d;
    --border:#dfe4e8;

    --archivo:"Archivo",sans-serif;
    --inter:"Inter",sans-serif;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--inter);
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

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

button,
input,
select,
textarea{
    font-family:inherit;
}

.section-container{
    width:min(1240px,92%);
    margin:auto;
}


/* =========================================
   LOADER
========================================= */

.page-loader{
    position:fixed;
    inset:0;
    z-index:9999;

    background:var(--primary-dark);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    transition:.6s ease;
}

.page-loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-mark{
    display:flex;
    gap:6px;
    margin-bottom:13px;
}

.loader-mark span{
    width:6px;
    height:34px;

    background:var(--gold);

    animation:loaderBars 1s infinite ease-in-out;
}

.loader-mark span:nth-child(2){
    animation-delay:.15s;
}

.loader-mark span:nth-child(3){
    animation-delay:.3s;
}

@keyframes loaderBars{

    0%,100%{
        transform:scaleY(.35);
        opacity:.4;
    }

    50%{
        transform:scaleY(1);
        opacity:1;
    }
}

.loader-text{
    color:#fff;
    font-family:var(--archivo);
    font-size:12px;
    letter-spacing:4px;
}

.loader-text b{
    color:var(--gold-bright);
}


/* ============================================================
   HEADER
============================================================ */

.site-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:500;

    color:#fff;

    background:rgba(0,30,56,.96);

    backdrop-filter:blur(16px);

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

}


.header-tech-line{

    min-height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:clamp(1.5rem,3vw,4rem);

    padding:0 20px;

    overflow:hidden;

    white-space:nowrap;

    font-size:8px;

    font-weight:800;

    letter-spacing:.15em;

}


.tech-highlight{

    color:var(--gold-bright);

}


.header-main{

    min-height:82px;

    display:flex;

    align-items:center;

    gap:25px;

}


.brand-logo{

    min-width:215px;

    display:flex;

    align-items:center;

}


.brand-logo-image{

    width:175px;

    max-height:58px;

    object-fit:contain;

    filter:

        drop-shadow(0 0 3px rgba(255,255,255,.95))

        drop-shadow(0 0 12px rgba(255,255,255,.35));

}


.brand-meta{

    display:none;

}


.main-nav{

    flex:1;

}


.main-nav ul{

    list-style:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:clamp(1rem,2vw,2rem);

}


.nav-link{

    position:relative;

    display:flex;

    align-items:center;

    gap:6px;

    padding:9px 0;

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

    font-size:11px;

    font-weight:700;

    transition:.3s ease;

}


.nav-link:hover,
.nav-link.active{

    color:#fff;

}


.nav-link::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:var(--gold-bright);

    transform:scaleX(0);

    transform-origin:left;

    transition:.3s ease;

}


.nav-link:hover::after,
.nav-link.active::after{

    transform:scaleX(1);

}


.nav-number{

    color:var(--gold-bright);

    font-size:7px;

}


.header-actions{

    display:flex;

    align-items:center;

    gap:10px;

}


.header-whatsapp{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border:
        1px solid rgba(255,255,255,.45);

    border-radius:50%;

    transition:.3s ease;

}


.header-whatsapp svg{

    width:19px;

    height:19px;

    fill:#fff;

}


.header-whatsapp:hover{

    background:#25D366;

    border-color:#25D366;

}


.hamburger{

    display:none;

    width:42px;

    height:42px;

    background:none;

    border:
        1px solid rgba(255,255,255,.2);

}


.hamburger span{

    display:block;

    width:20px;

    height:1px;

    margin:5px auto;

    background:#fff;

}


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

.mobile-nav{

    position:fixed;

    inset:0;

    z-index:490;

    padding:125px 7% 30px;

    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-100%);

    transition:
        transform .5s var(--ease);

}


.mobile-nav.open{

    transform:translateY(0);

}


.mobile-nav-top,
.mobile-nav-footer{

    display:flex;

    justify-content:space-between;

    color:var(--gold-bright);

    font-size:8px;

    font-weight:800;

    letter-spacing:.14em;

}


.mobile-menu-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    margin:35px 0;

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

}


.mobile-menu-grid a{

    display:grid;

    grid-template-columns:28px 1fr 18px;

    align-items:center;

    gap:7px;

    padding:18px 4px;

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

}


.mobile-menu-grid span{

    color:var(--gold-bright);

    font-size:8px;

}


.mobile-menu-grid strong{

    font-size:12px;

}


.mobile-menu-grid i{

    font-style:normal;

}


/* ============================================================
   VERTICAL ABOUT NAVIGATION
============================================================ */

.about-rail{

    position:fixed;

    right:22px;

    top:50%;

    z-index:100;

    display:flex;

    flex-direction:column;

    gap:25px;

    transform:translateY(-50%);

}


.rail-line{

    position:absolute;

    top:4px;
    bottom:4px;

    right:6px;

    width:1px;

    background:
        rgba(0,30,56,.15);

}


.rail-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding-right:18px;

    color:#7A8791;

    font-size:8px;

    font-weight:800;

    letter-spacing:.08em;

}


.rail-item span{

    color:var(--gold);

}


.rail-item::after{

    content:"";

    position:absolute;

    right:2px;

    width:8px;

    height:8px;

    background:#fff;

    border:
        1px solid #AAB3BC;

    border-radius:50%;

}


.rail-item.is-active{

    color:var(--primary);

}


.rail-item.is-active::after{

    width:10px;

    height:10px;

    right:1px;

    background:var(--gold-bright);

    border-color:var(--gold-bright);

    box-shadow:
        0 0 0 5px rgba(215,177,90,.12);

}


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

.contact-hero{
    position:relative;

    min-height:500px;

    padding-top:80px;

    display:flex;
    align-items:center;

    background:var(--primary);

    overflow:hidden;
}

.hero-grid-pattern{
    position:absolute;
    inset:0;

    opacity:.07;

    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);

    background-size:55px 55px;
}

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

    width:min(1240px,92%);

    margin:0 auto;

    display:grid;

    grid-template-columns:1.25fr .75fr;

    align-items:center;

    gap:35px;
}

.hero-copy{
    max-width:760px;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:14px;

    color:var(--gold-bright);

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.eyebrow span{
    width:30px;
    height:2px;

    background:var(--gold-bright);
}

.hero-copy h1{
    color:#fff;

    font-family:var(--archivo);

    font-size:clamp(38px,4.8vw,66px);

    line-height:1;

    letter-spacing:-2.5px;

    white-space:nowrap;

    margin-bottom:18px;
}

.hero-copy h1 span{
    color:var(--gold-bright);
}

.hero-copy p{
    max-width:650px;

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

    font-size:13px;

    line-height:1.65;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.hero-line{
    width:130px;
    height:2px;

    margin-top:22px;

    background:linear-gradient(
        90deg,
        var(--gold-bright),
        transparent
    );
}


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

.hero-graphic{
    position:relative;

    width:300px;
    height:300px;

    margin:auto;

    display:grid;
    place-items:center;
}

.graphic-core{
    position:relative;

    width:145px;
    height:145px;

    border:1px solid rgba(240,204,114,.7);

    border-radius:50%;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.02);

    box-shadow:
        inset 0 0 40px rgba(214,175,69,.06),
        0 0 50px rgba(214,175,69,.08);
}

.core-ring{
    position:absolute;
    inset:14px;

    border:1px dashed rgba(240,204,114,.4);

    border-radius:50%;

    animation:spin 12s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.core-text{
    text-align:center;
    font-family:var(--archivo);
}

.core-text strong{
    display:block;

    color:#fff;

    font-size:32px;
    line-height:1;
}

.core-text span{
    display:block;

    margin-top:5px;

    color:var(--gold-bright);

    font-size:9px;
    letter-spacing:3px;
}

.orbit{
    position:absolute;

    border:1px solid rgba(240,204,114,.2);

    border-radius:50%;
}

.orbit-one{
    width:245px;
    height:115px;

    transform:rotate(35deg);

    animation:orbitRotate 10s linear infinite;
}

.orbit-two{
    width:275px;
    height:150px;

    transform:rotate(-40deg);

    animation:orbitReverse 13s linear infinite;
}

@keyframes orbitRotate{
    to{
        transform:rotate(395deg);
    }
}

@keyframes orbitReverse{
    to{
        transform:rotate(-400deg);
    }
}

.graphic-point{
    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--gold-bright);

    box-shadow:0 0 12px var(--gold-bright);

    animation:pointPulse 2s infinite;
}

.point-one{
    top:42px;
    right:30px;
}

.point-two{
    bottom:55px;
    left:15px;

    animation-delay:.5s;
}

.point-three{
    bottom:22px;
    right:70px;

    animation-delay:1s;
}

@keyframes pointPulse{

    0%,100%{
        opacity:.4;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.5);
    }
}


/* =========================================
   CONTACT INFO
========================================= */

.contact-info-section{
    padding:65px 0 70px;

    background:#fff;
}

.section-heading-block{
    margin-bottom:28px;
}

.section-kicker{
    color:var(--gold);

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.section-heading-block h2,
.location-header h2{
    margin-top:9px;

    color:var(--primary);

    font-family:var(--archivo);

    font-size:clamp(30px,3vw,45px);

    line-height:1;

    letter-spacing:-1.5px;
}

.section-heading-block h2 span,
.location-header h2 span{
    color:var(--gold);
}


/* =========================================
   CONTACT CARDS
========================================= */

.contact-info-grid{
    display:grid;

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

    gap:15px;
}

.contact-card{
    position:relative;

    min-height:185px;

    padding:25px;

    background:var(--primary);

    border:1px solid rgba(214,175,69,.28);

    overflow:hidden;

    transition:.35s ease;
}

.contact-card::before{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:3px;

    background:var(--gold-bright);

    transition:.4s ease;
}

.contact-card:hover{
    transform:translateY(-5px);

    border-color:var(--gold);
}

.contact-card:hover::before{
    width:100%;
}

.contact-icon{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    margin-bottom:17px;

    background:rgba(240,204,114,.1);

    color:var(--gold-bright);

    border:1px solid rgba(240,204,114,.25);

    font-size:16px;
}

.contact-card-content small{
    color:var(--gold-bright);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.contact-card-content h3{
    margin:6px 0 8px;

    color:var(--gold-bright);

    font-family:var(--archivo);

    font-size:18px;
}

.contact-card-content p{
    color:#fff;

    font-size:12px;

    line-height:1.7;

    opacity:.92;
}

.card-arrow{
    position:absolute;

    right:20px;
    bottom:17px;

    color:var(--gold-bright);

    font-size:18px;

    transition:.3s ease;
}

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


/* =========================================
   ENQUIRY
========================================= */

.enquiry-section{
    position:relative;

    padding:75px 0;

    background:var(--primary);

    overflow:hidden;
}

.enquiry-background-grid{
    position:absolute;
    inset:0;

    opacity:.06;

    background-image:
        linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);

    background-size:50px 50px;
}

.enquiry-layout{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:.78fr 1.22fr;

    gap:55px;

    align-items:start;
}

.section-kicker.light{
    color:var(--gold-bright);
}

.enquiry-intro h2{
    margin:10px 0 18px;

    color:#fff;

    font-family:var(--archivo);

    font-size:clamp(38px,4vw,54px);

    line-height:1;

    letter-spacing:-2px;
}

.enquiry-intro h2 span{
    color:var(--gold-bright);
}

.enquiry-intro > p{
    max-width:470px;

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

    font-size:13px;

    line-height:1.8;
}

.requirement-points{
    margin-top:28px;
}

.requirement-points > div{
    display:flex;
    align-items:center;

    gap:13px;

    padding:11px 0;

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

.requirement-points span{
    color:var(--gold-bright);

    font-family:var(--archivo);

    font-size:11px;
    font-weight:800;
}

.requirement-points p{
    color:#fff;

    font-size:11px;
    font-weight:600;
}


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

.enquiry-form-wrap{
    padding:28px;

    background:#fff;

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);
}

.form-top{
    display:flex;
    justify-content:space-between;

    padding-bottom:16px;
    margin-bottom:22px;

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

    color:var(--gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:1.8px;
}

.form-row{
    display:grid;

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

    gap:15px;
}

.form-group{
    margin-bottom:16px;
}

.form-group label{
    display:block;

    margin-bottom:6px;

    color:var(--primary);

    font-size:9px;
    font-weight:800;

    letter-spacing:1.1px;
}

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

    padding:12px 13px;

    border:1px solid #d9dfe3;

    background:#fafbfc;

    outline:none;

    color:var(--primary);

    font-size:12px;

    transition:.3s ease;
}

.form-group textarea{
    min-height:105px;
    resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--gold);

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(214,175,69,.08);
}

.form-bottom{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:20px;
}

.attachment-box{
    display:flex;
    align-items:center;

    gap:9px;

    cursor:pointer;

    color:var(--primary);

    font-size:11px;
    font-weight:700;
}

.attachment-box i{
    color:var(--gold);
}

.attachment-box small{
    display:block;

    margin-top:2px;

    color:#8b949b;

    font-size:8px;
}

.attachment-box input{
    display:none;
}

.submit-btn{
    display:flex;
    align-items:center;

    gap:20px;

    padding:13px 19px;

    border:0;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;

    transition:.3s ease;
}

.submit-btn i{
    color:var(--gold-bright);

    transition:.3s ease;
}

.submit-btn:hover{
    background:var(--primary-light);

    transform:translateY(-2px);
}

.submit-btn:hover i{
    transform:translateX(4px);
}

.form-status{
    min-height:16px;

    margin-top:10px;

    font-size:11px;
}


/* =========================================
   LOCATION
========================================= */

.location-section{
    padding:70px 0;

    background:#fff;
}

.location-header{
    display:flex;

    justify-content:space-between;
    align-items:end;

    margin-bottom:28px;
}

.location-note{
    display:flex;
    align-items:center;

    gap:12px;

    padding:11px 16px;

    background:#f7f8f9;

    border-left:2px solid var(--gold);
}

.location-note i{
    color:var(--gold);

    font-size:18px;
}

.location-note strong{
    color:var(--primary);

    font-family:var(--archivo);

    font-size:12px;
}

.location-note p{
    margin-top:2px;

    color:#69747d;

    font-size:9px;
}

.map-wrapper{
    position:relative;

    height:400px;

    overflow:hidden;

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

    box-shadow:
        0 20px 50px rgba(0,30,56,.08);
}

.map-wrapper iframe{
    width:100%;
    height:100%;

    border:0;

    filter:grayscale(.15);
}

.map-overlay{
    position:absolute;

    left:20px;
    bottom:20px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:10px 15px;

    background:rgba(0,30,56,.95);

    pointer-events:none;
}

.map-pin{
    position:relative;

    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    color:var(--gold-bright);
}

.pin-pulse{
    position:absolute;
    inset:3px;

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

    border-radius:50%;

    animation:pinPulse 2s infinite;
}

@keyframes pinPulse{

    0%{
        transform:scale(.7);
        opacity:1;
    }

    100%{
        transform:scale(1.5);
        opacity:0;
    }
}

.map-label strong{
    display:block;

    color:#fff;

    font-family:var(--archivo);

    font-size:11px;
}

.map-label span{
    display:block;

    margin-top:2px;

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

    font-size:8px;
}

.map-coordinates{
    position:absolute;

    top:15px;
    right:15px;

    padding:7px 10px;

    background:rgba(0,30,56,.88);

    color:var(--gold-bright);

    font-size:8px;
    font-weight:800;

    letter-spacing:1px;
}


/* =========================================
   REVEAL
========================================= */

.reveal{
    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}


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

@media(max-width:1050px){

    .main-nav{
        gap:20px;
    }

    .hero-inner{
        grid-template-columns:1fr .7fr;
    }

    .hero-graphic{
        width:270px;
        height:270px;
    }

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

    .contact-card:last-child{
        grid-column:1/-1;
    }

    
}


@media(max-width:800px){

    .main-nav,
    .header-whatsapp{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .hero-inner{
        grid-template-columns:1fr;

        padding:45px 0 35px;
    }

    .hero-copy{
        text-align:center;
        margin:auto;
    }

    .eyebrow{
        justify-content:center;
    }

    .hero-copy h1{
        font-size:46px;

        white-space:normal;
    }

    .hero-copy p{
        margin:auto;
    }

    .hero-line{
        margin:20px auto 0;
    }

    .hero-graphic{
        width:240px;
        height:240px;
    }

    .enquiry-layout{
        grid-template-columns:1fr;

        gap:35px;
    }

    .location-header{
        align-items:flex-start;

        flex-direction:column;

        gap:18px;
    }
}


@media(max-width:600px){

    .header-inner{
        min-height:72px;
    }

    .brand img{
        width:50px;
        height:50px;
    }

    .brand-name{
        font-size:16px;
    }

    .mobile-nav{
        top:72px;
    }

    .contact-hero{
        min-height:auto;

        padding-top:72px;
    }

    .hero-inner{
        padding:45px 0 25px;
    }

    .hero-copy h1{
        font-size:39px;

        letter-spacing:-1.8px;
    }

    .hero-copy p{
        font-size:12px;
    }

    .hero-graphic{
        width:220px;
        height:220px;
    }

    .graphic-core{
        width:125px;
        height:125px;
    }

    .core-text strong{
        font-size:27px;
    }

    .orbit-one{
        width:200px;
        height:95px;
    }

    .orbit-two{
        width:225px;
        height:120px;
    }

    .contact-info-section{
        padding:50px 0;
    }

    .section-heading-block{
        margin-bottom:20px;
    }

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

    .contact-card:last-child{
        grid-column:auto;
    }

    .contact-card{
        min-height:170px;
    }

    .enquiry-section{
        padding:55px 0;
    }

    .enquiry-form-wrap{
        padding:20px;
    }

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

    .form-bottom{
        align-items:stretch;

        flex-direction:column;
    }

    .submit-btn{
        justify-content:space-between;
    }

    .location-section{
        padding:50px 0;
    }

    .map-wrapper{
        height:330px;
    }

    .map-coordinates{
        display:none;
    }

    

}


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

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}

/* ============================================================
   HMH TOOLS — CONTACT HEADER MATCHING MAIN WEBSITE
   Header-only override. Existing Contact sections/footer untouched.
============================================================ */

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:1000;
    color:#fff;
    background:linear-gradient(180deg,rgba(0,30,56,.94),transparent);
    border-bottom:0;
    transition:.45s cubic-bezier(.16,1,.3,1);
}

.site-header.scrolled,
.site-header.is-scrolled{
    background:rgba(0,19,38,.96);
    backdrop-filter:blur(20px);
    box-shadow:0 15px 50px rgba(0,0,0,.22);
}

.header-tech-line{
    height:32px;
    padding-inline:clamp(1rem,4vw,3.5rem);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(1.4rem,3.2vw,4.5rem);
    overflow:hidden;
    white-space:nowrap;
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
    color:#fff;
    text-shadow:0 1px 10px rgba(255,255,255,.18);
}

.header-main{
    width:min(1400px,94%);
    min-height:92px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:clamp(1.5rem,2.5vw,3rem);
}

.brand-logo{
    display:flex;
    align-items:center;
    gap:1.15rem;
    min-width:245px;
    position:relative;
    flex-shrink:0;
}

.brand-logo img.logo-enhanced{
    width:auto;
    max-width:225px;
    max-height:72px;
    object-fit:contain;
    filter:
        drop-shadow(0 0 2px rgba(255,255,255,.98))
        drop-shadow(0 0 7px rgba(255,255,255,.82))
        drop-shadow(0 0 16px rgba(255,255,255,.42))
        drop-shadow(0 5px 18px rgba(0,0,0,.32));
    transform:translateZ(0);
}

.brand-meta{
    border-left:1px solid rgba(255,255,255,.18);
    padding-left:1rem;
    display:flex;
    flex-direction:column;
    color:#fff;
    font-family:var(--archivo);
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1.6;
    white-space:nowrap;
}

.main-nav{
    flex:1;
    margin-left:0;
    display:flex;
    justify-content:center;
    min-width:0;
}

.main-nav ul{
    display:flex;
    align-items:center;
    gap:clamp(1.15rem,2vw,2rem);
    margin:0;
    padding:0;
}

.main-nav li{
    position:relative;
}

.main-nav .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:.45rem;
    padding:1.8rem .15rem;
    color:rgba(255,255,255,.82);
    font-family:var(--inter);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.04em;
    white-space:nowrap;
    transition:.3s ease;
}

.main-nav .nav-number{
    color:#7890a0;
    font-size:7px;
    font-weight:700;
    transition:.3s ease;
}

.main-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    width:auto;
    height:1px;
    background:#3ec8ff;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active{
    color:#fff;
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after{
    width:auto;
    transform:scaleX(1);
    transform-origin:left;
}

.nav-arrow{
    width:9px;
    height:9px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    transition:.3s ease;
}

.has-dropdown:hover .nav-arrow{
    transform:rotate(180deg);
}

/* Desktop dropdown */
.has-dropdown{
    position:relative;
}

.mega-menu{
    position:absolute;
    top:calc(100% - 1px);
    left:50%;
    transform:translate(-50%,15px);
    width:min(720px,80vw);
    padding:1.5rem;
    background:rgba(245,248,250,.98);
    color:#001E38;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:1rem;
    box-shadow:0 30px 80px rgba(0,0,0,.30);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.4s cubic-bezier(.16,1,.3,1);
}

.has-dropdown:hover .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}

.mega-intro{
    padding:1.4rem;
    background:#001E38;
    color:#fff;
}

.mega-intro > span{
    font-size:8px;
    letter-spacing:.18em;
    color:#3ec8ff;
}

.mega-intro h3{
    margin:1rem 0;
    color:#fff;
    font-family:var(--archivo);
    font-size:2rem;
    line-height:1.02;
    letter-spacing:-.04em;
}

.mega-intro p{
    color:#9eb0bd;
    font-size:.8rem;
    line-height:1.6;
}

.mega-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.4rem;
}

.mega-links a{
    display:flex;
    gap:.8rem;
    padding:1rem;
    border:1px solid #e1e7eb;
    transition:.3s cubic-bezier(.16,1,.3,1);
}

.mega-links a:hover{
    background:#001E38;
    color:#fff;
    transform:translateY(-3px);
}

.mega-no{
    color:#0878a8;
    font-size:.7rem;
}

.mega-links strong{
    display:block;
    margin-bottom:.2rem;
    font-size:.78rem;
    color: #001e38;
}

.mega-links small{
    color:#71808b;
    font-size:.68rem;
}

.mega-links a:hover small{
    color:#aab8c1;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-shrink:0;
}

.header-whatsapp{
    position:relative;
    isolation:isolate;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    border:1px solid rgba(255,255,255,.82);
    background:rgba(37,211,102,.06);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 0 16px rgba(255,255,255,.18),
        0 0 24px rgba(37,211,102,.12);
    animation:hmhWhatsappAttention 1.8s ease-in-out infinite;
    transition:.35s ease;
}

.header-whatsapp::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.82);
    opacity:.85;
    z-index:-1;
    animation:hmhWhatsappRing 1.8s ease-out infinite;
}

.header-whatsapp i{
    position:relative;
    z-index:2;
    font-size:23px;
    color:#fff;
    filter:drop-shadow(0 0 5px rgba(37,211,102,.75));
}

.header-whatsapp:hover{
    background:#25D366;
    border-color:#fff;
    color:#fff;
    transform:scale(1.08);
    box-shadow:
        0 0 0 4px rgba(37,211,102,.16),
        0 0 30px rgba(37,211,102,.55);
}

@keyframes hmhWhatsappAttention{
    0%,100%{
        background:rgba(37,211,102,.06);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.12),
            0 0 16px rgba(255,255,255,.18),
            0 0 24px rgba(37,211,102,.12);
    }
    45%{
        background:rgba(37,211,102,.22);
        box-shadow:
            0 0 0 2px rgba(37,211,102,.32),
            0 0 20px rgba(37,211,102,.62),
            0 0 36px rgba(37,211,102,.38);
    }
    55%{background:rgba(37,211,102,.08);}
}

@keyframes hmhWhatsappRing{
    0%{transform:scale(.82);opacity:.9;}
    70%{transform:scale(1.25);opacity:0;}
    100%{transform:scale(1.25);opacity:0;}
}

.menu-toggle{
    width:48px;
    height:48px;
    display:none;
    position:relative;
    margin-left:auto;
    border:0;
    background:transparent;
    cursor:pointer;
}

.menu-toggle span{
    position:absolute;
    left:11px;
    width:25px;
    height:1px;
    margin:0;
    background:#fff;
    transition:.35s cubic-bezier(.16,1,.3,1);
}

.menu-toggle span:nth-child(1){top:18px;}
.menu-toggle span:nth-child(2){top:24px;}
.menu-toggle span:nth-child(3){top:30px;}

.menu-toggle.is-active span:nth-child(1){
    top:24px;
    transform:rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
}

.menu-toggle.is-active span:nth-child(3){
    top:24px;
    transform:rotate(-45deg);
}

/* Mobile navigation */
.mobile-nav{
    position:fixed;
    inset:0;
    top:0;
    z-index:990;
    display:block;
    background:#001E38;
    color:#fff;
    transform:translateX(100%);
    transition:transform .7s cubic-bezier(.16,1,.3,1);
    padding:7rem clamp(1rem,4vw,3.5rem) 2rem;
    overflow:auto;
}

.mobile-nav.is-open,
.mobile-nav.open{
    transform:translateX(0);
}

.mobile-nav-top,
.mobile-nav-footer{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    font-size:8px;
    letter-spacing:.18em;
    color:#71899a;
}

.mobile-menu-grid{
    margin-top:2rem;
    border-top:1px solid rgba(255,255,255,.11);
}

.mobile-menu-grid a{
    display:grid;
    grid-template-columns:45px 1fr 30px;
    align-items:center;
    padding:1.2rem 0;
    border-bottom:1px solid rgba(255,255,255,.11);
    color:#fff;
}

.mobile-menu-grid span{
    color:#3ec8ff;
    font-size:.65rem;
}

.mobile-menu-grid strong{
    font-family:var(--archivo);
    font-size:1.7rem;
    font-weight:700;
}

.mobile-menu-grid i{
    font-style:normal;
    color:#3ec8ff;
}

.mobile-nav-footer{
    margin-top:2rem;
}

@media(max-width:1200px){
    .header-main{gap:1.2rem;}
    .brand-logo{min-width:215px;}
    .brand-logo img.logo-enhanced{max-width:195px;max-height:66px;}
    .main-nav ul{gap:1.05rem;}
    .main-nav .nav-link{font-size:.72rem;}
}

@media(max-width:1000px){
    .header-tech-line{
        justify-content:flex-start;
        gap:1.8rem;
        padding-inline:1rem;
        font-size:8px;
    }

    .header-main{min-height:82px;}
    .brand-logo{min-width:0;}
    .brand-logo img.logo-enhanced{max-width:180px;max-height:62px;}
    .brand-meta{display:none;}
    .main-nav,.header-whatsapp{display:none;}
    .menu-toggle{display:block;}
}

@media(max-width:600px){
    .header-tech-line{
        height:28px;
        gap:1.2rem;
        font-size:7px;
        letter-spacing:.11em;
    }

    .header-main{min-height:72px;}
    .brand-logo img.logo-enhanced{max-width:150px;max-height:56px;}
    .menu-toggle{width:44px;height:44px;}

    .mobile-nav{
        padding-top:6.5rem;
    }

    .mobile-menu-grid strong{
        font-size:1.35rem;
    }
}

@media(prefers-reduced-motion:reduce){
    .header-whatsapp,
    .header-whatsapp::before{
        animation:none;
    }
}