/* =========================================================
   HOLS-FIELD NIG. LTD. — CONTACT PAGE
   CLEAN / CONSOLIDATED VERSION
   ========================================================= */

:root{
    --orange:#ff7800;
    --orange-soft:rgba(255,120,0,.18);
    --black:#020303;
    --panel:#0b0d0d;
    --muted:#888b8d;
    --white:#f5f5f5;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--black);
    color:var(--white);
    font-family:"Outfit",sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.contact-page .contact-header{
    position:relative;
    z-index:1000;
    width:100%;
    margin:0;
    padding:14px 18px 0;
    background:transparent;
}

.contact-page .contact-nav{
    width:100%;
    max-width:1400px;
    height:62px;
    min-height:62px;
    margin:0 auto;
    padding:0 12px 0 20px;

    display:flex;
    align-items:center;

    background:linear-gradient(
        120deg,
        rgba(8,8,8,.98),
        rgba(2,2,2,.96)
    );

    border:1px solid rgba(255,255,255,.12);
    border-radius:17px;

    box-shadow:
        0 15px 50px rgba(0,0,0,.7),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.contact-page .contact-brand{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;

    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.5px;
    white-space:nowrap;
}

.contact-page .contact-brand b{
    color:var(--orange);
}

.contact-page .contact-brand small{
    display:block;
    margin-top:4px;
    color:#777;
    font-size:5px;
    font-weight:700;
    letter-spacing:2.5px;
}

.contact-page .brand-dots{
    width:28px;
    height:28px;
    flex-shrink:0;
    color:var(--orange);
    font-size:7px;
    line-height:8px;
    letter-spacing:2px;
}

/* Navigation links */
.contact-page .contact-links{
    display:flex;
    align-items:stretch;
    justify-content:center;
    height:62px;
    gap:0;
    margin:0;
}

.contact-page .contact-links a{
    position:relative;
    height:62px;
    padding:0 17px;

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

    color:rgba(255,255,255,.78);
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    font-weight:700;
    letter-spacing:0;
    white-space:nowrap;

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

.contact-page .contact-links a:hover{
    color:#fff;
    background:rgba(255,120,0,.035);
}

.contact-page .contact-links a.active{
    color:var(--orange);
    background:rgba(255,120,0,.07);
}

.contact-page .contact-links a.active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:30px;
    height:3px;
    transform:translateX(-50%);

    background:var(--orange);
    border-radius:4px 4px 0 0;
    box-shadow:0 0 12px rgba(255,120,0,.65);
}

/* Get in touch */
.contact-page .contact-nav-btn{
    width:176px;
    min-width:176px;
    height:52px;
    margin-left:12px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:17px;

    padding:0;
    border:0;
    border-radius:14px;

    background:var(--orange);
    color:#080808;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    line-height:1;

    box-shadow:0 10px 28px rgba(255,120,0,.20);

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

.contact-page .contact-nav-btn i{
    margin:0;
    font-size:13px;
    transition:transform .25s ease;
}

.contact-page .contact-nav-btn:hover{
    background:#ff8b1a;
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(255,120,0,.28);
}

.contact-page .contact-nav-btn:hover i{
    transform:translateX(4px);
}

.contact-page .contact-menu{
    display:none;
    width:38px;
    height:38px;
    margin-left:auto;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:#080808;
    color:var(--orange);
    cursor:pointer;
}

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

.new-contact-hero{
    position:relative;
    min-height:590px;
    overflow:hidden;
    border-bottom:1px solid rgba(255,120,0,.08);
}

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

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

    background-size:72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.7) 70%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.7) 70%,
            transparent
        );
}

.hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
}

.hero-glow-a{
    width:380px;
    height:380px;
    left:-180px;
    top:-130px;
    background:rgba(255,120,0,.11);
}

.hero-glow-b{
    width:500px;
    height:500px;
    right:-190px;
    top:60px;
    background:rgba(255,120,0,.07);
}

.hero-wrap{
    width:min(1380px,92%);
    min-height:590px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1.05fr;
    align-items:center;
    gap:10px;

    position:relative;
    z-index:2;
}

.hero-copy{
    padding:35px 0 50px;
}

.hero-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    padding:9px 15px;

    border:1px solid rgba(255,120,0,.65);
    border-radius:40px;

    color:#ddd;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.hero-kicker span{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--orange);
    box-shadow:0 0 12px var(--orange);
}

.hero-copy h1{
    margin:24px 0;
    display:flex;
    flex-direction:column;
    line-height:.86;
    letter-spacing:-4px;
}

.hero-copy h1 span{
    font-size:68px;
    font-weight:900;
}

.hero-copy h1 strong{
    font-size:66px;
    font-weight:900;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(255,255,255,.85);
}

.hero-copy h1 em{
    font-size:76px;
    font-style:normal;
    font-weight:900;
    color:var(--orange);
}

.hero-copy p{
    max-width:610px;
    margin:0;
    color:#c0c2c3;
    font-size:14px;
    line-height:1.85;
}

.hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    margin-top:27px;
}

.hero-btn{
    min-height:48px;
    padding:0 20px;

    display:inline-flex;
    align-items:center;
    gap:10px;

    text-decoration:none;
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;

    transition:
        transform .28s cubic-bezier(.22,.61,.36,1),
        box-shadow .28s ease,
        background .28s ease,
        border-color .28s ease;
}

.hero-btn-main{
    background:var(--orange);
    color:#080808;
    box-shadow:0 0 28px rgba(255,120,0,.18);
}

.hero-btn-alt{
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.025);
}

.hero-btn:hover{
    transform:translateY(-3px);
}

.hero-btn i{
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
}

.hero-btn:hover i{
    transform:translateX(5px);
}

.hero-proof{
    margin-top:32px;

    display:flex;
    align-items:center;
    gap:10px;

    color:#aaa;
    font-size:9px;
    letter-spacing:2px;
}

.hero-proof span{
    position:relative;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;

    color:var(--orange);
    border:1px solid rgba(255,120,0,.4);
    border-radius:7px;
}

/* Live indicator */
.hero-proof span::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    right:-2px;
    top:-2px;

    border-radius:50%;
    background:var(--orange);

    animation:statusPulse 2s infinite;
}

@keyframes statusPulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,120,0,.45);
    }
    70%{
        box-shadow:0 0 0 7px rgba(255,120,0,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,120,0,0);
    }
}

/* =========================================================
   RADAR / SCANNER
   IMPORTANT:
   The four interface labels are NOT repositioned by the
   polish layer. Their original positions are preserved.
   ========================================================= */

.hero-interface{
    height:520px;
    position:relative;
    overflow:visible;
}

/* CONNECT background word */
.hero-interface .interface-word{
    position:absolute;
    left:50%;
    top:-5px;
    transform:translateX(-50%);
    z-index:0;

    font-size:clamp(75px,7vw,145px);
    font-weight:800;
    line-height:.85;
    letter-spacing:-5px;

    color:transparent;
    -webkit-text-stroke:1px rgba(255,120,0,.18);

    text-shadow:
        0 0 20px rgba(255,120,0,.04),
        0 0 45px rgba(255,120,0,.03);

    white-space:nowrap;
    pointer-events:none;
}

/* Main radar — moved UP slightly */
.radar{
    position:absolute;
    width:500px;
    height:500px;
    right:85px;
    top:25px;
    z-index:2;
    border-radius:50%;
}

/* Radar rings */
.radar-ring{
    position:absolute;
    inset:0;
    border:1px solid rgba(255,120,0,.25);
    border-radius:50%;
}

.r1{transform:scale(.28);}
.r2{transform:scale(.52);}
.r3{transform:scale(.75);}
.r4{
    border-color:rgba(255,120,0,.4);
}

/* Crosshair */
.radar-line{
    position:absolute;
    background:rgba(255,255,255,.11);
}

.radar-line.h{
    width:100%;
    height:1px;
    top:50%;
}

.radar-line.v{
    height:100%;
    width:1px;
    left:50%;
}

/* Scanner sweep */
.radar-sweep{
    position:absolute;
    inset:8%;
    border-radius:50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0 315deg,
            rgba(255,120,0,.55) 350deg,
            transparent 355deg
        );

    animation:spin 5s linear infinite;
}

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

/* Radar core */
.radar-core{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:104px;
    height:104px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,120,0,.85);
    border-radius:50%;
    background:#050606;

    box-shadow:
        0 0 0 15px rgba(255,120,0,.035),
        0 0 50px rgba(255,120,0,.22);

    animation:radarCorePulse 3.5s ease-in-out infinite;
}

.radar-core::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,120,0,.18) 0%,
            rgba(255,120,0,.06) 40%,
            transparent 70%
        );

    filter:blur(8px);
    z-index:-1;
}

.radar-core i{
    color:var(--orange);
    font-size:32px;
}

@keyframes radarCorePulse{
    0%,100%{
        box-shadow:
            0 0 18px rgba(255,120,0,.18),
            0 0 45px rgba(255,120,0,.08);
    }

    50%{
        box-shadow:
            0 0 28px rgba(255,120,0,.32),
            0 0 70px rgba(255,120,0,.14);
    }
}

/* Radar dots */
.radar-dot{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--orange);
    box-shadow:0 0 13px var(--orange);
}

.d1{left:27%;top:19%;}
.d2{right:12%;top:30%;}
.d3{right:30%;bottom:20%;}
.d4{left:15%;bottom:29%;}

/* =========================================================
   ORANGE GLOW DIRECTLY UNDER RADAR
   This is attached to .radar, NOT .hero-interface.
   Therefore it cannot push or affect the four labels.
   ========================================================= */

.radar::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:-20px;
    transform:translateX(-50%);

    width:72%;
    height:34px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,120,0,.62) 0%,
            rgba(255,120,0,.30) 30%,
            rgba(255,120,0,.10) 55%,
            transparent 76%
        );

    filter:blur(9px);
    opacity:.9;

    pointer-events:none;
    z-index:-1;
}

/* =========================================================
   FOUR RADAR LABELS
   ORIGINAL POSITIONING — DO NOT MOVE THESE WITH THE RADAR
   ========================================================= */

.interface-label{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    z-index:4;
    white-space:nowrap;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        filter .35s ease;
}

/* ORIGINAL POSITIONS */
.il1{
    left:5%;
    top:70px;
}

.il2{
    right:-2%;
    top:70px;
}

.il3{
    left:5%;
    bottom:70px;
}

.il4{
    right:-2%;
    bottom:70px;
}

.interface-label span{
    width:40px;
    height:40px;
    flex:0 0 40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,120,0,.65);
    border-radius:50%;

    color:var(--orange);
    background:#050606;

    box-shadow:0 0 12px rgba(255,120,0,.08);

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.interface-label b{
    font-size:10px;
    letter-spacing:1.5px;
}

.interface-label small{
    display:block;
    margin-top:3px;

    color:#858585;
    font-size:9px;
    letter-spacing:0;
    font-weight:400;
}

.interface-label:hover{
    transform:translateY(-4px) scale(1.035);
    filter:drop-shadow(0 0 12px rgba(255,120,0,.22));
}

.interface-label:hover span{
    border-color:rgba(255,120,0,.9);
    box-shadow:
        0 0 0 5px rgba(255,120,0,.04),
        0 0 22px rgba(255,120,0,.22);
    transform:scale(1.06);
}

/* =========================================================
   CONTACT WORKSPACE
   ========================================================= */

.contact-workspace{
    width:min(1380px,92%);
    margin:auto;
    padding:70px 0;
}

.workspace-grid{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:24px;
}

.channels-card,
.enquiry-card{
    position:relative;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.09);
    border-radius:24px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255,120,0,.08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #101212,
            #080909
        );

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        border-color .4s ease,
        box-shadow .4s ease;
}

.channels-card{
    padding:30px 26px;
}

.channels-card::before,
.enquiry-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,120,0,.06);
    filter:blur(45px);
    pointer-events:none;
}

.channels-card::before{
    right:-70px;
    top:-80px;
}

.enquiry-card::before{
    right:-70px;
    bottom:-100px;
}

.channels-card:hover,
.enquiry-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,120,0,.18);

    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        0 0 35px rgba(255,120,0,.035);
}

.tiny-label{
    position:relative;
    color:var(--orange);
    font-size:9px;
    font-weight:900;
    letter-spacing:2.5px;
}

.channels-card h2{
    position:relative;
    margin:12px 0 30px;
    font-size:31px;
    line-height:1;
}

.channels-card h2 span,
.enquiry-card h2 span{
    color:var(--orange);
}

.channel{
    position:relative;
    display:flex;
    gap:12px;
    margin-bottom:23px;

    transition:transform .3s ease;
}

.channel:hover{
    transform:translateX(4px);
}

.channel-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,120,0,.42);
    border-radius:10px;
    color:var(--orange);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.channel:hover .channel-icon{
    transform:translateY(-3px) scale(1.05);
    border-color:rgba(255,120,0,.8);
    background:rgba(255,120,0,.06);
    box-shadow:0 0 20px rgba(255,120,0,.15);
}

.channel small{
    display:block;
    color:#a4a4a4;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.6px;
    margin-bottom:7px;
}

.channel p,
.channel a{
    margin:0;
    color:#d1d1d1;
    font-size:12px;
    line-height:1.7;
    text-decoration:none;
}

.channel a:hover{
    color:var(--orange);
}

.muted-note{
    color:#777!important;
    font-size:9px!important;
    margin-top:2px!important;
}

.channel ul{
    list-style:none;
    padding:0;
    margin:0;
}

.channel li{
    color:#aaa;
    font-size:10px;
    line-height:1.8;
}

.channel li::before{
    content:"✓";
    color:var(--orange);
    margin-right:6px;
}

/* Socials */
.social-row{
    position:relative;
    display:flex;
    gap:9px;
    margin-top:8px;
}

.social-row a{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    text-decoration:none;

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

.social-row a:hover{
    transform:translateY(-4px);
    color:var(--orange);
    border-color:rgba(255,120,0,.65);
    background:rgba(255,120,0,.045);
    box-shadow:0 8px 22px rgba(255,120,0,.10);
}

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

.enquiry-card{
    padding:36px;
}

.enquiry-card h2{
    position:relative;
    margin:9px 0 7px;
    font-size:40px;
    line-height:1;
}

.form-intro{
    position:relative;
    color:#929596;
    font-size:12px;
    line-height:1.7;
    margin:0 0 25px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

.field{
    position:relative;
    min-height:56px;
    margin-bottom:13px;
    padding:0 16px;

    display:flex;
    align-items:center;
    gap:10px;

    background:#0a0c0c;
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;

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

.field::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:1px;
    background:var(--orange);

    transition:width .35s ease;
    pointer-events:none;
}

.field:focus-within{
    transform:translateY(-1px);
    border-color:rgba(255,120,0,.48);
    background:rgba(255,120,0,.012);

    box-shadow:
        0 0 0 3px rgba(255,120,0,.025),
        0 8px 25px rgba(0,0,0,.18);
}

.field:focus-within::after{
    width:100%;
}

.field > i{
    color:#777;
    font-size:13px;
    transition:
        color .25s ease,
        transform .25s ease;
}

.field:focus-within > i{
    color:var(--orange);
    transform:scale(1.08);
}

.field input,
.field select,
.field textarea{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font:12px "Outfit",sans-serif;
}

.field input::placeholder,
.field textarea::placeholder{
    color:#777;
}

.select-field{
    position:relative;
}

.select-field select{
    appearance:none;
}

.select-field option{
    background:#111;
}

.select-arrow{
    position:absolute;
    right:16px;
    color:#777!important;
}

.textarea-field{
    align-items:flex-start;
    padding-top:16px;
}

.field textarea{
    height:100px;
    resize:none;
}

.form-submit{
    position:relative;
    width:100%;
    height:52px;

    border:0;
    border-radius:9px;

    background:var(--orange);
    color:#080808;

    font:900 10px "Outfit",sans-serif;
    letter-spacing:1px;

    cursor:pointer;

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

.form-submit i{
    float:right;
    transition:transform .3s ease;
}

.form-submit:hover{
    transform:translateY(-3px);
    filter:brightness(1.04);
    box-shadow:0 12px 35px rgba(255,120,0,.18);
}

.form-submit:hover i{
    transform:translateX(5px);
}

.form-submit:active{
    transform:translateY(0) scale(.985);
}

.form-security{
    margin-top:11px;
    color:#707273;
    font-size:9px;
}

.form-security i{
    color:var(--orange);
    margin-right:5px;
}

/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust-strip{
    width:min(1380px,92%);
    margin:0 auto 75px;
    padding:22px 25px;

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

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

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(255,120,0,.07),
            transparent 45%
        ),
        #0a0c0c;
}

.trust-item{
    min-height:72px;
    padding:5px 23px;

    display:flex;
    align-items:center;
    gap:13px;

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

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

.trust-item:last-child{
    border-right:0;
}

.trust-item:hover{
    transform:translateY(-3px);
    background:rgba(255,120,0,.015);
}

.trust-item > span{
    width:52px;
    height:52px;
    flex:0 0 52px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,120,0,.5);
    border-radius:50%;
    color:var(--orange);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.trust-item:hover > span{
    transform:scale(1.08);
    border-color:rgba(255,120,0,.7);
    box-shadow:0 0 20px rgba(255,120,0,.12);
}

.trust-item b{
    font-size:9px;
    letter-spacing:1px;
    line-height:1.45;
}

.trust-item p{
    margin:5px 0 0;
    color:#777;
    font-size:8px;
    line-height:1.4;
}

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

.contact-page .site-footer{
    position:relative;
    z-index:2;
    width:100%;
    display:block;
    margin:0;
    padding:0;
    background:#030303;
    color:#fff;
}

.contact-page .site-footer *,
.contact-page .site-footer *::before,
.contact-page .site-footer *::after{
    box-sizing:border-box;
}

.contact-page .site-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:8%;
    right:8%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,120,0,.16),
            transparent
        );

    pointer-events:none;
}

.contact-page .site-footer .footer-inner{
    width:min(1400px,calc(100% - 120px));
    margin:0 auto;
    padding:90px 0 70px;

    display:grid;
    grid-template-columns:1.45fr .85fr .85fr 1fr;
    gap:70px;
    align-items:start;
}

.contact-page .site-footer .footer-brand,
.contact-page .site-footer .footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
}

.contact-page .site-footer .footer-logo{
    display:inline-block;
    margin:0 0 28px;

    font-family:"Poppins",sans-serif;
    font-size:28px;
    font-weight:800;
    line-height:1;
    letter-spacing:-1px;

    color:#fff;
    text-decoration:none;
}

.contact-page .site-footer .footer-logo span{
    color:var(--orange);
}

.contact-page .site-footer .footer-brand p{
    max-width:430px;
    margin:0;

    font-family:"Poppins",sans-serif;
    font-size:14px;
    line-height:1.9;
    font-weight:400;

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

.contact-page .site-footer .footer-socials{
    display:flex;
    gap:12px;
    margin-top:28px;
}

.contact-page .site-footer .footer-socials a{
    width:40px;
    height:40px;

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

    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;

    color:#fff;
    text-decoration:none;

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

.contact-page .site-footer .footer-socials a:hover{
    color:var(--orange);
    border-color:var(--orange);
    transform:translateY(-3px);
}

.contact-page .site-footer .footer-column h4{
    margin:0 0 26px;

    font-family:"Poppins",sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:3px;
    color:#fff;
}

.contact-page .site-footer .footer-column > a{
    display:block;
    width:max-content;
    margin:0 0 17px;

    font-family:"Poppins",sans-serif;
    font-size:13px;
    line-height:1.5;

    color:rgba(255,255,255,.48);
    text-decoration:none;

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

.contact-page .site-footer .footer-column > a:hover{
    color:var(--orange);
    transform:translateX(4px);
}

.contact-page .site-footer .footer-contact{
    display:flex;
    flex-direction:column;
}

.contact-page .site-footer .footer-contact-block{
    margin-bottom:27px;
}

.contact-page .site-footer .footer-label{
    display:block;
    margin-bottom:11px;

    font-family:"Poppins",sans-serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:2.5px;
    color:rgba(255,255,255,.55);
}

.contact-page .site-footer .footer-contact-line{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin:0;

    font-family:"Poppins",sans-serif;
    font-size:13px;
    line-height:1.75;

    color:rgba(255,255,255,.52);
    text-decoration:none;
}

.contact-page .site-footer .footer-contact-line i{
    flex:0 0 auto;
    margin-top:4px;
    color:var(--orange);
    font-size:13px;
}

.contact-page .site-footer a.footer-contact-line:hover{
    color:#fff;
}

.contact-page .site-footer .footer-bottom{
    width:min(1400px,calc(100% - 120px));
    margin:0 auto;
    padding:28px 0 30px;

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

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    font-family:"Poppins",sans-serif;
    font-size:11px;
    color:rgba(255,255,255,.42);
}

.contact-page .site-footer .footer-legal{
    display:flex;
    align-items:center;
    gap:10px;
}

.contact-page .site-footer .footer-legal a{
    color:rgba(255,255,255,.42);
    text-decoration:none;
    transition:color .25s ease;
}

.contact-page .site-footer .footer-legal a:hover{
    color:var(--orange);
}

.contact-page .site-footer .footer-legal b{
    color:var(--orange);
    font-weight:400;
}

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

.contact-page .reveal-item{
    opacity:0;
    transform:translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,.61,.36,1);
}

.contact-page .reveal-item.revealed{
    opacity:1;
    transform:translateY(0);
}

/* =========================================================
   BUTTON RIPPLE
   ========================================================= */

.contact-page .button-ripple{
    position:absolute;
    width:8px;
    height:8px;

    border-radius:50%;
    background:rgba(255,255,255,.42);

    transform:translate(-50%,-50%) scale(1);
    animation:buttonRipple .65s ease-out forwards;

    pointer-events:none;
    z-index:5;
}

@keyframes buttonRipple{
    from{
        opacity:.7;
        transform:translate(-50%,-50%) scale(1);
    }

    to{
        opacity:0;
        transform:translate(-50%,-50%) scale(22);
    }
}

/* =========================================================
   PAGE LOAD ANIMATION
   ========================================================= */

.new-contact-hero .hero-kicker,
.new-contact-hero .hero-copy h1,
.new-contact-hero .hero-copy > p,
.new-contact-hero .hero-actions,
.new-contact-hero .hero-proof{
    opacity:0;
    transform:translateY(24px);
    animation:contactHeroRise .85s cubic-bezier(.22,.61,.36,1) forwards;
}

.new-contact-hero .hero-kicker{animation-delay:.08s;}
.new-contact-hero .hero-copy h1{animation-delay:.18s;}
.new-contact-hero .hero-copy > p{animation-delay:.30s;}
.new-contact-hero .hero-actions{animation-delay:.42s;}
.new-contact-hero .hero-proof{animation-delay:.55s;}

@keyframes contactHeroRise{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.new-contact-hero .hero-interface{
    opacity:0;
    transform:translateX(35px);
    animation:radarEntrance 1.15s cubic-bezier(.22,.61,.36,1) .35s forwards;
}

@keyframes radarEntrance{
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* =========================================================
   RESPONSIVE — LARGE DESKTOP
   ========================================================= */

@media (min-width:1400px){

    .contact-page .contact-nav{
        max-width:1400px;
        height:62px;
        min-height:62px;
    }

    .contact-page .contact-links a{
        padding:0 17px;
        font-size:11px;
    }

    .contact-page .contact-nav-btn{
        width:176px;
        min-width:176px;
        height:52px;
    }

    .radar{
        width:520px;
        height:520px;
        right:85px;
        top:0;
    }

    /* Keep the four labels in their original relationship
       to the interface — no late-stage repositioning. */
    .il1{left:5%;top:70px;}
    .il2{right:-2%;top:70px;}
    .il3{left:5%;bottom:70px;}
    .il4{right:-2%;bottom:70px;}
}

/* =========================================================
   RESPONSIVE — TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1200px){

    .contact-page .contact-links a{
        padding:0 10px;
        font-size:9px;
    }

    .contact-page .contact-nav-btn{
        width:150px;
        min-width:150px;
    }

    .hero-copy h1 span{font-size:58px;}
    .hero-copy h1 strong{font-size:56px;}
    .hero-copy h1 em{font-size:64px;}

    .radar{
        width:420px;
        height:420px;
        right:45px;
        top:35px;
    }

    .workspace-grid{
        grid-template-columns:280px 1fr;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE NAV
   ========================================================= */

@media (max-width:900px){

    .contact-page .contact-header{
        padding:12px 12px 0;
    }

    .contact-page .contact-nav{
        width:100%;
        max-width:none;
        height:64px;
        min-height:64px;
        padding:0 14px;
    }

    .contact-page .contact-brand{
        min-width:auto;
        font-size:16px;
    }

    .contact-page .brand-dots{
        width:24px;
        height:24px;
        font-size:6px;
        line-height:7px;
    }

    .contact-page .contact-links{
        position:absolute;
        top:70px;
        left:0;
        right:0;

        height:auto;
        display:none;
        flex-direction:column;

        padding:10px;
        gap:0;

        background:#090b0c;
        border:1px solid rgba(255,255,255,.12);
        border-radius:12px;

        box-shadow:0 20px 50px rgba(0,0,0,.7);
    }

    .contact-page .contact-links.open{
        display:flex;
    }

    .contact-page .contact-links a{
        height:auto;
        min-height:46px;
        padding:13px 15px;
        justify-content:flex-start;
        font-size:10px;
    }

    .contact-page .contact-links a.active::after{
        display:none;
    }

    .contact-page .contact-nav-btn{
        display:none;
    }

    .contact-page .contact-menu{
        display:flex;
    }

    .hero-wrap{
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:50px;
    }

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

    .hero-kicker{
        margin:auto;
    }

    .hero-copy h1{
        align-items:center;
    }

    .hero-copy p{
        margin:auto;
    }

    .hero-actions,
    .hero-proof{
        justify-content:center;
    }

    .hero-interface{
        height:420px;
    }

    .radar{
        left:50%;
        right:auto;
        width:360px;
        height:360px;
        top:20px;
        transform:translateX(-50%);
    }

    .hero-interface .interface-word{
        left:50%;
        top:-20px;
        transform:translateX(-50%);
        font-size:80px;
    }

    .interface-label{
        transform:scale(.9);
    }

    /* Keep labels near their original positions, only adapting
       to the narrower interface. */
    .il1{
        left:2%;
        top:45px;
    }

    .il2{
        right:2%;
        top:45px;
    }

    .il3{
        left:2%;
        bottom:45px;
    }

    .il4{
        right:2%;
        bottom:45px;
    }

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

    .trust-strip{
        grid-template-columns:1fr 1fr;
    }

    .trust-item:nth-child(2){
        border-right:0;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width:650px){

    .new-contact-hero{
        min-height:auto;
    }

    .hero-wrap{
        width:90%;
        padding-top:35px;
    }

    .hero-copy h1{
        letter-spacing:-2px;
    }

    .hero-copy h1 span{
        font-size:44px;
    }

    .hero-copy h1 strong{
        font-size:42px;
    }

    .hero-copy h1 em{
        font-size:50px;
    }

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

    .hero-actions{
        flex-direction:column;
    }

    .hero-btn{
        width:100%;
        justify-content:center;
    }

    .hero-proof{
        justify-content:flex-start;
        font-size:7px;
        letter-spacing:1px;
        text-align:left;
    }

    .hero-interface{
        height:365px;
        transform:scale(.86);
        transform-origin:top center;
        margin-bottom:-45px;
    }

    .radar{
        width:290px;
        height:290px;
        top:20px;
    }

    .hero-interface .interface-word{
        font-size:48px;
        letter-spacing:-2px;
        top:-10px;
    }

    .interface-label{
        transform:scale(.72);
    }

    .il1{
        left:4%;
        top:40px;
    }

    .il2{
        right:0;
        top:40px;
    }

    .il3{
        left:4%;
        bottom:40px;
    }

    .il4{
        right:0;
        bottom:40px;
    }

    .contact-workspace{
        width:90%;
        padding:45px 0;
    }

    .channels-card,
    .enquiry-card{
        padding:25px 20px;
    }

    .enquiry-card h2{
        font-size:31px;
    }

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

    .trust-strip{
        width:90%;
        grid-template-columns:1fr;
        padding:12px;
    }

    .trust-item{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.09);
        padding:16px 8px;
    }

    .trust-item:last-child{
        border-bottom:0;
    }

    .contact-page .site-footer .footer-inner{
        width:88%;
        grid-template-columns:1fr;
        gap:40px;
        padding:60px 0 45px;
    }

    .contact-page .site-footer .footer-logo{
        font-size:25px;
    }

    .contact-page .site-footer .footer-brand p{
        max-width:100%;
    }

    .contact-page .site-footer .footer-bottom{
        width:88%;
        padding:22px 0 28px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .contact-page .site-footer .footer-legal{
        flex-wrap:wrap;
        gap:7px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET FOOTER
   ========================================================= */

@media (min-width:651px) and (max-width:1000px){

    .contact-page .site-footer .footer-inner{
        width:min(92%,760px);
        grid-template-columns:1fr 1fr;
        gap:55px 45px;
        padding:70px 0 55px;
    }

    .contact-page .site-footer .footer-brand{
        grid-column:1 / -1;
    }

    .contact-page .site-footer .footer-bottom{
        width:min(92%,760px);
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }
}

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

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}
/* =========================================================
   CONTACT PAGE — FINAL MOBILE HAMBURGER FIX
   MOBILE ONLY — DESKTOP UNTOUCHED
   ========================================================= */

@media (max-width: 980px) {

    .contact-page .contact-nav {
        position: relative !important;
        overflow: visible !important;
    }

    /* HAMBURGER */
    .contact-page .contact-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        margin-left: 10px !important;

        padding: 0 !important;

        background: #080808 !important;
        border: 1px solid rgba(255,120,0,.45) !important;
        border-radius: 10px !important;

        color: #ff7800 !important;

        cursor: pointer !important;

        position: relative !important;
        z-index: 100002 !important;
    }

    .contact-page .contact-menu i {
        display: block !important;
        color: #ff7800 !important;
        font-size: 21px !important;
        line-height: 1 !important;
    }

    /* MOBILE DROPDOWN */
    .contact-page .contact-links {
        position: absolute !important;

        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;

        width: auto !important;

        display: none !important;
        flex-direction: column !important;

        padding: 8px !important;
        margin: 0 !important;

        background: #090b0c !important;

        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 12px !important;

        box-shadow: 0 20px 50px rgba(0,0,0,.7) !important;

        z-index: 100001 !important;
    }

    .contact-page .contact-links.open {
        display: flex !important;
    }

    .contact-page .contact-links a {
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 0 15px !important;

        font-size: 10px !important;

        border-radius: 8px !important;
    }

    .contact-page .contact-links a.active::after {
        display: none !important;
    }

    .contact-page .contact-nav-btn {
        display: none !important;
    }
}