/* OCEANX HEADER — GLASS NAV + SERVICES DROPDOWN */
:root{--navy:#16213e;--brand:#16213e;--brand-dark:#0d1529;--brand-mid:#24365d;--white:#fff;--grey:#aeb2ba;--line:#dfe2e7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:#111;background:#fff}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.float-nav{
    position:fixed;
    z-index:100;
    top:22px;
    left:2.2vw;
    right:2.2vw;
    min-height:80px;
    display:grid;
    grid-template-columns:220px 1fr auto;
    align-items:center;
    gap:24px;
    padding:10px 12px 10px 28px;
    border:1px solid rgba(255,255,255,.58);
    border-radius:22px;
    background:linear-gradient(135deg,rgba(255,255,255,.90) 0%,rgba(226,234,241,.80) 48%,rgba(188,207,222,.72) 100%);
    backdrop-filter:blur(22px) saturate(130%);
    -webkit-backdrop-filter:blur(22px) saturate(130%);
    box-shadow:0 18px 55px rgba(22,33,62,.16),inset 0 1px 0 rgba(255,255,255,.65);
    transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.brand{
    pointer-events:auto;
    width:180px;
    display:flex;
    align-items:center;
}
.brand img{
    display:block;
    width:100%;
    height:auto;
    max-height:48px;
    object-fit:contain;
}
.nav-center{
    display:flex;
    justify-content:center;
    min-width:0;
}
.nav-links{
    pointer-events:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    color:#111b2d;
}
.nav-links > a,
.nav-dropdown-toggle{
    position:relative;
    border:0;
    background:none;
    color:inherit;
    padding:12px 0;
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
}
.nav-links > a::after,
.nav-dropdown-toggle::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:4px;
    height:1.5px;
    transform:scaleX(0);
    transform-origin:center;
    background:currentColor;
    transition:transform .25s ease;
}
.nav-links > a:hover::after,
.nav-dropdown-toggle:hover::after,
.nav-dropdown.is-open .nav-dropdown-toggle::after{
    transform:scaleX(1);
}
.nav-dropdown{
    position:relative;
}
.nav-dropdown-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.nav-chevron{
    font-size:17px;
    line-height:.7;
    transform:translateY(-1px);
    transition:transform .25s ease;
}
.nav-dropdown.is-open .nav-chevron{
    transform:rotate(180deg) translateY(1px);
}
.services-menu{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    width:310px;
    padding:10px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:16px;
    background:rgba(245,248,250,.94);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    box-shadow:0 24px 60px rgba(9,24,42,.2);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, -8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.services-menu::before{
    content:'';
    position:absolute;
    top:-7px;
    left:50%;
    width:14px;
    height:14px;
    transform:translateX(-50%) rotate(45deg);
    background:rgba(245,248,250,.94);
    border-left:1px solid rgba(255,255,255,.75);
    border-top:1px solid rgba(255,255,255,.75);
}
.nav-dropdown:hover .services-menu,
.nav-dropdown.is-open .services-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
}
.services-menu a{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 14px;
    border-radius:10px;
    color:#15213a;
    font-size:14px;
    font-weight:600;
    transition:background .2s ease, transform .2s ease;
}
.services-menu a:hover{
    background:linear-gradient(135deg,rgba(22,33,62,.10),rgba(36,54,93,.06));
    color:#16213e;
    transform:translateX(3px);
}
.services-menu a span{
    display:flex;
    align-items:center;
    gap:12px;
}
.services-menu a small{
    width:25px;
    color:#7b8796;
    font:10px 'Space Mono',monospace;
}
.services-menu a b{
    font-size:16px;
    font-weight:500;
}
.nav-quote{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    gap:14px;
    min-height:58px;
    padding:6px 6px 6px 20px;
    border-radius:18px;
    background:linear-gradient(135deg,#16213e 0%,#24365d 55%,#0d1529 100%);
    color:#fff;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    transition:transform .25s ease, background .25s ease;
}
.nav-quote:hover{
    background:linear-gradient(135deg,#24365d 0%,#16213e 55%,#0d1529 100%);
    transform:translateY(-1px);
}
.nav-quote b{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#fff;
    color:#16213e;
    font-size:21px;
    font-weight:400;
}
.menu{
    display:none;
    pointer-events:auto;
    width:54px;
    height:54px;
    border:0;
    background:linear-gradient(135deg,#16213e 0%,#24365d 55%,#0d1529 100%);
    color:#fff;
    border-radius:15px;
    padding:15px;
    cursor:pointer;
}
.menu i{
    display:block;
    height:2px;
    background:#fff;
    margin:6px 0;
    transition:transform .25s ease, opacity .25s ease;
}
.float-nav.menu-open .menu i:first-child{
    transform:translateY(4px) rotate(45deg);
}
.float-nav.menu-open .menu i:last-child{
    transform:translateY(-4px) rotate(-45deg);
}
.hero{height:100vh;min-height:720px;color:#fff;overflow:hidden;background:var(--navy)}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:var(--navy)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-bg:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,30,57,.92),rgba(20,30,57,.34))}
.grid-overlay{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero-copy{position:absolute;left:2.5vw;bottom:15vh;max-width:850px}
.tag{display:inline-block;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;background:rgba(255,255,255,.14);padding:8px 12px;border-radius:5px}
.tag.dark{background:#eef0f3;color:#4c5260}
.hero h1,.intro h2,.section-lead h2,.quote h2{font-size:clamp(44px,5.1vw,78px);line-height:1.03;letter-spacing:-.055em;margin:22px 0}.hero h1 strong,.intro h2 strong,.section-lead h2 strong{font-weight:500;color:#aeb2ba}.hero p{max-width:620px;font-size:18px;line-height:1.6;color:#d8deeb}.pill{display:inline-flex;align-items:center;gap:28px;margin-top:20px;padding:16px 22px;border-radius:999px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700}.pill.light{background:#fff;color:var(--navy)}.pill.navy{background:var(--navy);color:#fff}.hero-status{position:absolute;right:2.5vw;bottom:14vh;background:rgba(255,255,255,.13);backdrop-filter:blur(14px);padding:18px 24px;border-left:3px solid #fff}.hero-status span,.hero-status strong{display:block;font-size:11px}.hero-status strong{margin-top:7px}.scroll{position:absolute;right:2.5vw;bottom:24px;font-family:'Space Mono';font-size:10px}.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;padding:130px 2.2vw}.intro h2{font-size:clamp(40px,4vw,62px)}.reveal-img{margin:0;position:relative;height:720px;overflow:hidden;border-radius:8px}.reveal-img img,.reveal-img video{width:100%;height:100%;object-fit:cover;display:block}.reveal-img figcaption{position:absolute;bottom:18px;left:18px;background:rgba(20,30,57,.82);color:#fff;padding:12px;font:11px 'Space Mono'}.metric{display:grid;grid-template-columns:auto auto 1fr;align-items:end;margin:65px 0;border-bottom:1px solid var(--line);padding-bottom:40px}.metric b{font-size:120px;line-height:.8;letter-spacing:-.08em}.metric i{font-size:52px;color:#bbb;font-style:normal}.metric span{font:12px 'Space Mono';margin-left:25px;color:#6b7280}.services{padding:120px 2.2vw;background:#f5f6f8}.section-lead{max-width:850px;margin-bottom:70px}.section-lead h2{font-size:clamp(44px,4.5vw,70px)}.section-lead p{max-width:550px;color:#606775}.service-stack{max-width:1180px;margin:auto}.service-card{position:sticky;top:110px;min-height:520px;margin-bottom:32px;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;background:var(--navy);color:#fff;box-shadow:0 25px 80px rgba(20,30,57,.2)}
.service-card img{width:100%;height:100%;object-fit:cover;min-height:520px}
.service-card>div{padding:55px;display:flex;flex-direction:column}
.service-card small{font:12px 'Space Mono';color:#aab5d0}
.service-card h3{font-size:50px;letter-spacing:-.04em;margin:80px 0 18px}
.service-card p{color:#c9d0df;font-size:17px;line-height:1.55}
.service-card span{margin-top:auto;font:12px 'Space Mono'}
.industries{background:#101010;color:#fff;padding:90px 2.2vw 120px}
.industry-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #383838;padding-bottom:25px}
.industry-grid{display:grid;grid-template-columns:1fr 300px;gap:8vw;margin-top:70px}
.industry-list button{display:block;width:100%;text-align:left;border:0;background:none;color:#555;font-size:clamp(42px,4vw,68px);font-weight:600;letter-spacing:-.05em;cursor:pointer;padding:8px 0}
.industry-list button.active,.industry-list button:hover{color:#fff}
.industry-list em{font:11px 'Space Mono';font-style:normal;background:#202020;padding:7px;margin-right:16px;border-radius:4px}
.industry-visual img{height:210px;width:100%;object-fit:cover;border-radius:8px}
.industry-visual p{color:#aaa;line-height:1.5}

.faq{padding:120px 2.2vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.faq h2{font-size:42px;letter-spacing:-.04em}
.faq h2 strong{color:#aaa}
.faq>div:first-child a{text-decoration:underline;font-weight:700}
.accordions details{border:1px solid var(--line);border-radius:7px;padding:24px;margin-bottom:12px}
.accordions summary{font-size:18px;font-weight:600;cursor:pointer}
.accordions p{color:#667085}

.quote{padding:90px 2.2vw;min-height:760px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:5vw;background:linear-gradient(90deg,rgba(20,30,57,.92),rgba(20,30,57,.55)),url('../images/project-cargo.jpg') center/cover}.quote-copy{padding-top:60px}.quote h2{font-size:52px}.quote-copy p{max-width:500px;color:#d5dbea}.quote form{background:rgba(255,255,255,.16);backdrop-filter:blur(18px);padding:48px;border-radius:12px;align-self:center}.quote label{display:block;font:12px 'Space Mono';margin:10px 0 12px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quote input,.quote textarea{width:100%;border:0;border-radius:5px;padding:20px;font:15px 'DM Sans';margin-bottom:12px}.quote textarea{height:120px}.quote button{border:0;border-radius:999px;padding:17px 22px;background:#fff;color:var(--navy);font:700 12px 'Space Mono';cursor:pointer}footer{background:#16213e;color:#fff;padding:80px 2.2vw 25px}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:70px}.footer-main img{max-width:210px;filter:brightness(0) invert(1)}.footer-main h2{font-size:38px}.footer-main b{font:12px 'Space Mono';display:block;margin-bottom:18px;color:#9ba6bc}.footer-main a{display:block;margin:10px 0;color:#d7dce6}.footer-bottom{border-top:1px solid #394158;padding-top:22px;font:11px 'Space Mono';display:flex;justify-content:space-between;color:#8f99ad}
@media(max-width:1100px){
    .float-nav{
        grid-template-columns:180px 1fr auto;
        padding-left:22px;
        gap:14px;
    }
    .nav-links{gap:18px}
    .nav-links > a,.nav-dropdown-toggle{font-size:14px}
    .nav-quote{font-size:13px;padding-left:16px}
    .nav-quote b{width:44px;height:44px}
}
@media(max-width:900px){
    .float-nav{
        top:14px;
        left:14px;
        right:14px;
        min-height:68px;
        grid-template-columns:1fr auto;
        padding:7px 8px 7px 18px;
        border-radius:18px;
    }
    .brand{width:150px}
    .brand img{max-height:40px}
    .nav-quote{display:none}
    .menu{display:block}
    .nav-center{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        display:block;
        padding:0;
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .float-nav.menu-open .nav-center{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    .nav-links{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px;
        border:1px solid rgba(255,255,255,.75);
        border-radius:16px;
        background:rgba(245,248,250,.96);
        backdrop-filter:blur(24px);
        -webkit-backdrop-filter:blur(24px);
        box-shadow:0 24px 60px rgba(9,24,42,.2);
        color:#111b2d;
    }
    .nav-links > a,
    .nav-dropdown-toggle{
        width:100%;
        padding:14px 12px;
        font-size:15px;
        text-align:left;
    }
    .nav-links > a::after,
    .nav-dropdown-toggle::after{display:none}
    .nav-dropdown-toggle{justify-content:space-between}
    .services-menu{
        position:static;
        width:100%;
        margin:2px 0 5px;
        padding:5px;
        border:0;
        border-radius:10px;
        box-shadow:none;
        background:#eaf0f3;
        transform:none;
    }
    .services-menu::before{display:none}
    .nav-dropdown:hover .services-menu{
        opacity:0;
        visibility:hidden;
        transform:none;
    }
    .nav-dropdown.is-open .services-menu{
        opacity:1;
        visibility:visible;
        transform:none;
    }
    .hero{min-height:650px}
    .hero-copy{left:22px;right:22px}
    .hero-status{display:none}
    .intro,.faq,.quote{grid-template-columns:1fr}
    .intro{padding:90px 22px}
    .reveal-img{height:500px}
    .metric b{font-size:88px}
    .services,.industries,.faq,.quote{padding-left:22px;padding-right:22px}
    .service-card{position:relative;top:auto;grid-template-columns:1fr;min-height:0}
    .service-card img{min-height:280px;height:280px}
    .service-card>div{padding:32px;min-height:330px}
    .service-card h3{margin:35px 0 15px;font-size:38px}
    .industry-grid{grid-template-columns:1fr}
    .industry-visual{display:none}
    .fields{grid-template-columns:1fr}
    .footer-main{grid-template-columns:1fr}
    .footer-bottom{gap:20px;flex-direction:column}
}


/* =========================================================
   OCEANX PREMIUM GLOBAL FOOTER
   Replaces the original simple footer.
   ========================================================= */
.site-footer{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:0 2.2vw 22px;
    background:linear-gradient(135deg,#0d1529 0%,#16213e 42%,#24365d 72%,#0d1529 100%);
    color:#fff;
}
.site-footer::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 25%,rgba(255,255,255,.08),transparent 28%),
        radial-gradient(circle at 78% 70%,rgba(92,122,176,.16),transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.035),transparent 45%);
}
.footer-map{
    position:absolute;
    z-index:-1;
    left:50%;
    top:105px;
    width:min(760px,58vw);
    height:430px;
    transform:translateX(-50%);
    opacity:.16;
    pointer-events:none;
    background-image:
        radial-gradient(circle, rgba(154,205,218,.9) 1.2px, transparent 1.5px),
        radial-gradient(circle, rgba(154,205,218,.75) 1px, transparent 1.4px);
    background-size:9px 9px, 13px 13px;
    background-position:0 0, 5px 5px;
    mask-image:radial-gradient(ellipse 58% 47% at 50% 48%, #000 0 55%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 58% 47% at 50% 48%, #000 0 55%, transparent 78%);
    transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.footer-top{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr 1.15fr 1fr 1fr;
    gap:clamp(28px,5vw,90px);
    padding:48px 3.5vw 52px;
    min-height:310px;
}
.footer-column h3,
.footer-contact h3{
    margin:0 0 24px;
    font-size:14px;
    font-weight:700;
    letter-spacing:-.01em;
}
.footer-column a{
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 0 16px;
    color:#a9bac2;
    font-size:14px;
    line-height:1.35;
    transition:color .22s ease, transform .22s ease;
}
.footer-column a:hover{
    color:#fff;
    transform:translateX(4px);
}
.footer-divider{
    height:1px;
    background:rgba(255,255,255,.16);
}
.footer-contact-row{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8vw;
    padding:62px 3.5vw 58px;
}
.footer-brand-block{
    max-width:440px;
}
.footer-logo{
    display:inline-block;
    width:190px;
    margin-bottom:24px;
}
.footer-logo img{
    width:100%;
    height:auto;
    filter:brightness(0) invert(1);
}
.footer-brand-block p{
    max-width:390px;
    margin:0 0 28px;
    color:#9db2bb;
    font-size:14px;
    line-height:1.65;
}
.footer-cta{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:13px 17px 13px 20px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    color:#fff;
    font:700 11px 'Space Mono',monospace;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-cta span{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border-radius:50%;
    background:#fff;
    color:#16213e;
    font-size:16px;
}
.footer-cta:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.42);
    transform:translateY(-2px);
}
.footer-contact{
    justify-self:end;
    width:min(430px,100%);
}
.footer-contact h3{margin-bottom:25px}
.footer-contact a,
.footer-contact p{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin:0 0 15px;
    color:#a9bac2;
    font-size:14px;
    line-height:1.5;
}
.footer-contact a:hover{color:#fff}
.footer-icon{
    width:20px;
    flex:0 0 20px;
    color:#d7e8ed;
    font-size:15px;
    text-align:center;
}
.footer-socials{
    display:flex;
    gap:9px;
    margin-top:26px;
}
.footer-socials a{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    margin:0;
    border-radius:50%;
    background:#fff;
    color:#16213e;
    font-size:11px;
    font-weight:800;
    transition:transform .22s ease, background .22s ease;
}
.footer-socials a:hover{
    color:#16213e;
    background:#e5eaf2;
    transform:translateY(-3px);
}
.footer-bottom{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    min-height:47px;
    padding:17px 0 0;
    border-top:1px solid rgba(255,255,255,.16);
    color:#aeb7c8;
    font:10px 'Space Mono',monospace;
    letter-spacing:.01em;
}
.footer-bottom span:last-child{text-align:right}

/* footer entrance animation */
.footer-column,
.footer-brand-block,
.footer-contact{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.site-footer.footer-visible .footer-column,
.site-footer.footer-visible .footer-brand-block,
.site-footer.footer-visible .footer-contact{
    opacity:1;
    transform:none;
}
.site-footer.footer-visible .footer-column:nth-child(2){transition-delay:.08s}
.site-footer.footer-visible .footer-column:nth-child(3){transition-delay:.16s}
.site-footer.footer-visible .footer-column:nth-child(4){transition-delay:.24s}
.site-footer.footer-visible .footer-contact{transition-delay:.12s}

@media(max-width:1000px){
    .footer-top{
        grid-template-columns:repeat(2,1fr);
        gap:38px 50px;
    }
    .footer-contact-row{gap:50px}
    .footer-map{width:75vw}
}
@media(max-width:700px){
    .site-footer{padding-left:18px;padding-right:18px;padding-bottom:16px}
    .footer-top{
        grid-template-columns:1fr 1fr;
        padding:42px 4px 35px;
        gap:32px 24px;
        min-height:0;
    }
    .footer-column h3,.footer-contact h3{font-size:12px;margin-bottom:18px}
    .footer-column a{font-size:13px;margin-bottom:12px}
    .footer-contact-row{
        grid-template-columns:1fr;
        gap:48px;
        padding:45px 4px 42px;
    }
    .footer-contact{justify-self:stretch}
    .footer-logo{width:160px}
    .footer-map{
        top:330px;
        width:120vw;
        height:380px;
        opacity:.11;
    }
    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
        padding:16px 4px 0;
        font-size:9px;
    }
    .footer-bottom span:last-child{text-align:left}
}
@media(max-width:430px){
    .footer-top{grid-template-columns:1fr}
    .footer-column a{width:auto}
    .footer-socials{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){
    .footer-column,.footer-brand-block,.footer-contact{opacity:1;transform:none;transition:none}
    .footer-map{transition:none}
}


/* =========================================================
   OCEANX BRAND SYSTEM + ACTIVE NAVIGATION
   ========================================================= */

.nav-links > a.active,
.nav-dropdown-toggle.active{
    color:#16213e;
    font-weight:700;
}

.nav-links > a.active::after,
.nav-dropdown-toggle.active::after{
    transform:scaleX(1);
    background:#16213e;
}

.services-menu a.active{
    background:linear-gradient(135deg,#16213e 0%,#24365d 100%);
    color:#fff;
}

.services-menu a.active small{
    color:rgba(255,255,255,.68);
}

.nav-dropdown-toggle.active .nav-chevron{
    color:#16213e;
}

/* Keep the desktop navigation centered and the mobile menu functional. */
@media(max-width:900px){
    .float-nav{
        grid-template-columns:1fr auto;
        padding:7px 8px 7px 18px;
    }

    .nav-center{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        display:block;
        padding:0;
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    }

    .float-nav.menu-open .nav-center{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav-links{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px;
        margin:0;
        border:1px solid rgba(255,255,255,.75);
        border-radius:16px;
        background:rgba(245,248,250,.97);
        backdrop-filter:blur(24px);
        -webkit-backdrop-filter:blur(24px);
        box-shadow:0 24px 60px rgba(9,24,42,.20);
        color:#111b2d;
    }

    .nav-links > a,
    .nav-dropdown-toggle{
        width:100%;
        padding:14px 12px;
        font-size:15px;
        text-align:left;
    }

    .nav-links > a::after,
    .nav-dropdown-toggle::after{display:none}

    .nav-dropdown-toggle{justify-content:space-between}

    .services-menu{
        position:static;
        width:100%;
        margin:2px 0 5px;
        padding:5px;
        border:0;
        border-radius:10px;
        box-shadow:none;
        background:#eaf0f3;
        transform:none;
    }

    .services-menu::before{display:none}

    .nav-dropdown:hover .services-menu{
        opacity:0;
        visibility:hidden;
        transform:none;
    }

    .nav-dropdown.is-open .services-menu{
        opacity:1;
        visibility:visible;
        transform:none;
    }
}

/* Premium brand gradient for the footer. */
.site-footer{
    background:
        linear-gradient(
            135deg,
            #0d1529 0%,
            #16213e 42%,
            #24365d 72%,
            #0d1529 100%
        );
}

.footer-cta{
    background:linear-gradient(135deg,#16213e 0%,#24365d 55%,#0d1529 100%);
    box-shadow:0 12px 28px rgba(22,33,62,.22),inset 0 1px 0 rgba(255,255,255,.10);
}

.footer-cta:hover{
    background:linear-gradient(135deg,#24365d 0%,#16213e 55%,#0d1529 100%);
    box-shadow:0 16px 34px rgba(22,33,62,.30),inset 0 1px 0 rgba(255,255,255,.14);
}

.footer-cta span,
.footer-socials a{
    color:#16213e;
}

.footer-socials a:hover{
    color:#16213e;
}

@media(prefers-reduced-motion:reduce){
    .float-nav,
    .services-menu,
    .nav-quote,
    .footer-cta,
    .footer-socials a{transition:none}
}


/* =========================================================
   OCEANX SAFE FIX
   IMPORTANT:
   - Keeps the original .service-card sticky behavior unchanged.
   - Keeps the existing GSAP ScrollTrigger card animation unchanged.
   - Only fixes page overflow and footer visibility.
   ========================================================= */

/* Prevent the browser viewport from gaining horizontal scroll.
   This does NOT touch service-card transforms or positioning. */
html{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

/* Decorative/background elements must not create viewport overflow. */
.site-footer{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

/* Footer animation in the current JS does not add .footer-visible.
   Therefore keep the footer content visible without touching cards. */
.site-footer .footer-column,
.site-footer .footer-brand-block,
.site-footer .footer-contact{
    opacity:1;
    transform:none;
}

/* Footer content cannot create a wider viewport. */
.footer-top,
.footer-contact-row,
.footer-bottom,
.footer-column,
.footer-brand-block,
.footer-contact{
    max-width:100%;
    min-width:0;
}

.footer-column a,
.footer-contact a,
.footer-contact p{
    overflow-wrap:anywhere;
}

/* The decorative map is allowed to be wider than its visual area,
   but it must remain clipped inside the footer. */
.site-footer .footer-map{
    pointer-events:none;
}

/* Safe responsive footer rules only. */
@media(max-width:900px){
    .site-footer{
        overflow:hidden;
    }

    .footer-top,
    .footer-contact-row{
        width:100%;
        max-width:100%;
    }
}


/* =========================================================
   FINAL STACKED-CARDS SAFETY
   Do not change .service-card positioning here.
   The original stylesheet controls:
   position: sticky;
   top: 110px;
   and the mobile breakpoint.

   The GSAP ScrollTrigger animation in oceanx-reference.js
   controls the scale / rotation / brightness transition.
   ========================================================= */

/* Keep horizontal overflow clipped without creating an
   overflow scrolling ancestor, so position:sticky continues
   to work normally. */
html,
body{
    overflow-x:clip;
}

/* Footer remains visible because the current JS does not
   add a .footer-visible class. */
.site-footer .footer-column,
.site-footer .footer-brand-block,
.site-footer .footer-contact{
    opacity:1;
    transform:none;
}


/* =========================================================
   OCEANX FOOTER – DOTTED LOGO WORDMARK BACKGROUND
   Large halftone-dot "OCEANX" behind the footer content.
   CSS only – no HTML change needed.
   ========================================================= */
.site-footer::after{
    content:'OCEANX';
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    bottom:-2.5vw;
    text-align:center;
    white-space:nowrap;
    font-family:'Space Mono',monospace;
    font-weight:700;
    font-size:22vw;
    line-height:1.3;
    letter-spacing:0;
    color:transparent;
    background-image:radial-gradient(circle, rgba(190,210,240,.95) 1.1px, transparent 1.5px);
    background-size:5px 5px;
    -webkit-background-clip:text;
    background-clip:text;
    opacity:.12;
    pointer-events:none;
    user-select:none;
}
@media(max-width:700px){
    .site-footer{padding-bottom:30vw}
    .site-footer::after{
        font-size:27vw;
        bottom:-3vw;
        opacity:.14;
        background-size:4px 4px;
    }
}


/* =========================================================
   OCEANX FOOTER – SOLID LOGO COLOR, NO DOTTED GLOBE
   Footer background now matches the logo navy (#16213E).
   ========================================================= */
.site-footer{
    background:#16213e;
}
.site-footer::before{
    display:none;
}
.site-footer .footer-map{
    display:none;
}


/* =========================================================
   OCEANX FOOTER – INTERACTIVE DOTS (canvas) + CURSOR RING
   The canvas replaces the static CSS wordmark.
   ========================================================= */
.site-footer::after{
    display:none;
}
.site-footer .footer-dots{
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    pointer-events:none;
}
.site-footer .footer-cursor-ring,
.site-footer .footer-cursor-dot{
    position:absolute;
    left:0;
    top:0;
    z-index:5;
    pointer-events:none;
    border-radius:50%;
    opacity:0;
    transition:opacity .2s ease;
}
.site-footer .footer-cursor-ring{
    width:68px;
    height:68px;
    border:2px solid rgba(255,255,255,.85);
}
.site-footer .footer-cursor-dot{
    width:6px;
    height:6px;
    background:#fff;
}
.site-footer.footer-cursor-on .footer-cursor-ring,
.site-footer.footer-cursor-on .footer-cursor-dot{
    opacity:1;
}
.site-footer.has-footer-cursor,
.site-footer.has-footer-cursor *{
    cursor:none;
}
.site-footer.has-footer-cursor a,
.site-footer.has-footer-cursor button{
    cursor:pointer;
}


/* =========================================================
   OCEANX HERO – ALL CAPS + LOGO COLOR (#16213E)
   ========================================================= */
.hero-copy h1,
.hero-copy p,
.hero-copy .tag,
.hero-copy .pill,
.hero-type-line,
#hero-typewriter{
    text-transform:uppercase;
}
.hero h1{
    font-size:clamp(36px,4.3vw,66px);
    letter-spacing:-.035em;
    line-height:1.08;
}
.hero-copy p{
    letter-spacing:.02em;
    font-size:16px;
}
/* Logo navy over the video */
.hero-bg:after{
    background:linear-gradient(90deg,rgba(22,33,62,.94) 0%,rgba(22,33,62,.62) 55%,rgba(22,33,62,.38) 100%);
}
/* Logo navy tag chip with a light edge */
.hero-copy .tag{
    background:#16213e;
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
}
/* Rotating line + caret pick up a light tint of the logo navy */
.hero h1 strong.hero-type-line{
    color:#9fb0d3;
}
/* Quote button: white pill, logo-navy text and arrow circle */
.hero .pill.light{
    background:#fff;
    color:#16213e;
}
.hero .pill.light b{
    background:#16213e;
    color:#fff;
    width:26px;
    height:26px;
    border-radius:50%;
    display:inline-grid;
    place-items:center;
    font-size:13px;
}
.hero .pill.light:hover{
    background:#16213e;
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.hero .pill.light:hover b{
    background:#fff;
    color:#16213e;
}
.hero-status{
    border-left-color:#fff;
    background:rgba(22,33,62,.55);
}

/* keep hero text above the video overlay */
.hero-bg{isolation:isolate;z-index:0}
.hero-copy,.hero-status,.scroll{z-index:3}


/* =========================================================
   OCEANX HERO – HEADING ON ONE LINE, ROTATING TEXT SMALLER
   ========================================================= */
.hero h1{
    white-space:nowrap;
}
.hero h1 strong.hero-type-line{
    display:block;
    white-space:nowrap;
    font-size:.56em;
    line-height:1.15;
    letter-spacing:-.01em;
    margin-top:.45em;
}
@media(max-width:700px){
    .hero h1{
        font-size:clamp(22px,6.4vw,40px);
    }
    .hero h1 strong.hero-type-line{
        font-size:.6em;
    }
}


/* =========================================================
   OCEANX HERO – MOVING SUPPORTING SENTENCE
   Changes together with the rotating heading line.
   ========================================================= */
.hero-copy p{
    min-height:3.4em;          /* reserve space so the layout never jumps */
}
.hero-copy .hero-desc{
    display:inline-block;
    transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.2,1), filter .38s ease;
    will-change:opacity,transform;
}
.hero-copy .hero-desc.is-out{
    opacity:0;
    transform:translateY(14px);
    filter:blur(3px);
}
@media(max-width:700px){
    .hero-copy p{min-height:6.9em}
}
@media(prefers-reduced-motion:reduce){
    .hero-copy .hero-desc{transition:none}
}


/* =========================================================
   OCEANX HERO – NO PLACEHOLDER IMAGE BEFORE THE VIDEO
   Brand navy shows first, then the video fades in.
   ========================================================= */
.hero-bg{background:#16213e}
.hero-video{
    opacity:0;
    transition:opacity .9s ease;
}
.hero-video.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){
    .hero-video{transition:none}
}


/* =========================================================
   OCEANX ABOUT / INTRO SECTION – ENHANCED
   ========================================================= */
.intro{
    position:relative;
    align-items:center;
    gap:6vw;
    padding:120px 2.2vw 130px;
    background:
        radial-gradient(circle at 96% 8%,rgba(22,33,62,.06),transparent 30%),
        #fff;
}
.intro-copy{min-width:0}

/* heading + lead */
.intro h2 strong{
    background:linear-gradient(90deg,#aeb2ba,#7d8aa8);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.intro-lead{
    max-width:560px;
    margin:0;
    font-size:17px;
    line-height:1.65;
    color:#5b6474;
}

/* 98% metric */
.intro .metric{
    margin:38px 0 30px;
    padding-bottom:30px;
}
.intro .metric b{font-size:clamp(72px,7vw,104px);color:#16213e}
.intro .metric i{color:#9aa5bd}
.intro .metric span{letter-spacing:.04em}

/* feature points */
.intro-points{
    list-style:none;
    margin:0 0 34px;
    padding:0;
    display:grid;
    gap:12px;
}
.intro-points li{
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px 20px;
    border:1px solid #e6e9ef;
    border-radius:14px;
    background:#fff;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
.intro-points li:hover{
    transform:translateX(8px);
    border-color:#16213e;
    background:#f7f8fb;
    box-shadow:0 14px 34px rgba(22,33,62,.10);
}
.intro-points li>i{
    flex:0 0 42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#16213e;
    color:#fff;
    font:700 12px 'Space Mono',monospace;
    font-style:normal;
}
.intro-points b{display:block;font-size:16px;color:#16213e;letter-spacing:-.01em}
.intro-points span{display:block;margin-top:3px;font-size:14px;color:#6b7280}

/* actions */
.intro-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.intro-actions .pill{margin-top:0;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.intro-actions .pill:hover{
    transform:translateY(-3px);
    background:#24365d;
    box-shadow:0 14px 30px rgba(22,33,62,.28);
}
.intro-link{
    font:700 12px 'Space Mono',monospace;
    color:#16213e;
    padding-bottom:4px;
    border-bottom:2px solid #16213e;
    transition:letter-spacing .3s ease,opacity .3s ease;
}
.intro-link:hover{letter-spacing:.06em;opacity:.75}

/* visual column */
.intro-visual{
    position:relative;
    align-self:stretch;
    display:flex;
    min-height:640px;
}
.intro-visual::before{          /* offset outline frame */
    content:'';
    position:absolute;
    inset:26px -16px -16px 26px;
    border:1.5px solid rgba(22,33,62,.22);
    border-radius:16px;
    z-index:0;
}
.intro-visual::after{           /* dotted accent, top-right */
    content:'';
    position:absolute;
    top:-26px;
    right:-26px;
    width:150px;
    height:150px;
    z-index:0;
    background-image:radial-gradient(circle,rgba(22,33,62,.35) 1.6px,transparent 2px);
    background-size:15px 15px;
}
.intro .reveal-img{
    position:relative;
    z-index:1;
    flex:1;
    height:auto;
    min-height:640px;
    border-radius:16px;
    box-shadow:0 30px 70px rgba(22,33,62,.22);
}
.intro .reveal-img::after{      /* soft navy fade under caption */
    content:'';
    position:absolute;
    inset:auto 0 0 0;
    height:38%;
    background:linear-gradient(to top,rgba(22,33,62,.78),transparent);
    pointer-events:none;
}
.intro .reveal-img figcaption{
    z-index:2;
    left:22px;
    bottom:22px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:6px;
    letter-spacing:.04em;
}

/* floating cards */
.intro-badge,
.intro-stat{
    position:absolute;
    z-index:3;
}
.intro-badge{
    top:26px;
    left:-24px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-radius:12px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 18px 40px rgba(22,33,62,.18);
    animation:introFloat 5s ease-in-out infinite;
}
.intro-badge b{display:block;font:700 11px 'Space Mono',monospace;color:#16213e;letter-spacing:.04em}
.intro-badge small{display:block;margin-top:4px;font:10px 'Space Mono',monospace;color:#6b7280}
.live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.55);
    animation:introPulse 2s ease-out infinite;
}
.intro-stat{
    right:30px;
    bottom:-30px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 24px;
    border-radius:14px;
    background:#16213e;
    color:#fff;
    box-shadow:0 22px 46px rgba(22,33,62,.32);
    animation:introFloat 6s ease-in-out -2s infinite;
}
.intro-stat b{font-size:46px;line-height:.9;letter-spacing:-.05em}
.intro-stat span{font:10px/1.5 'Space Mono',monospace;color:#aab5d0;letter-spacing:.06em}

@keyframes introFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}
@keyframes introPulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
    70%{box-shadow:0 0 0 11px rgba(34,197,94,0)}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

@media(max-width:1100px){
    .intro{gap:60px;padding:90px 22px 110px}
    .intro-visual{min-height:520px}
    .intro .reveal-img{min-height:520px}
    .intro-badge{left:14px}
}
@media(max-width:700px){
    .intro{padding:70px 18px 90px}
    .intro-visual{min-height:380px}
    .intro .reveal-img{height:auto;min-height:380px}
    .intro-visual::before{inset:16px -8px -8px 16px}
    .intro-visual::after{width:96px;height:96px;top:-16px;right:-8px}
    .intro-badge{top:14px;left:12px;padding:10px 14px}
    .intro-stat{right:14px;bottom:-24px;padding:14px 18px}
    .intro-stat b{font-size:36px}
    .intro .reveal-img figcaption{left:14px;bottom:44px;font-size:10px;padding:10px}
    .intro-points li{padding:14px 16px}
    .intro-points li:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
    .intro-badge,.intro-stat,.live-dot{animation:none}
}


/* =========================================================
   OCEANX HERO – WAVE EDGE + SCROLL HINT
   ========================================================= */
.hero{position:relative;--wave-h:clamp(56px,7.5vw,120px)}

.hero-wave{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:var(--wave-h);
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}
.hero-wave .wave{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background-repeat:repeat-x;
    background-position:0 100%;
    background-size:max(1440px,100vw) 100%;
}
.hero-wave .wave-back{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0%2C85 C120%2C35 240%2C35 360%2C85 C480%2C135 600%2C135 720%2C85 C840%2C35 960%2C35 1080%2C85 C1200%2C135 1320%2C135 1440%2C85 L1440%2C140 L0%2C140 Z'/%3E%3C/svg%3E");
    animation:waveDriftA 22s linear infinite;
}
.hero-wave .wave-mid{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.55' d='M0%2C85 C120%2C35 240%2C35 360%2C85 C480%2C135 600%2C135 720%2C85 C840%2C35 960%2C35 1080%2C85 C1200%2C135 1320%2C135 1440%2C85 L1440%2C140 L0%2C140 Z'/%3E%3C/svg%3E");
    animation:waveDriftB 16s linear infinite;
    height:86%;
}
.hero-wave .wave-front{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0%2C70 C120%2C10 240%2C10 360%2C70 C480%2C130 600%2C130 720%2C70 C840%2C10 960%2C10 1080%2C70 C1200%2C130 1320%2C130 1440%2C70 L1440%2C140 L0%2C140 Z'/%3E%3C/svg%3E");
    animation:waveDriftA 11s linear infinite;
    height:68%;
}
@keyframes waveDriftA{from{background-position-x:0}to{background-position-x:calc(-1 * max(1440px,100vw))}}
@keyframes waveDriftB{from{background-position-x:calc(-1 * max(1440px,100vw))}to{background-position-x:0}}

/* lift hero content above the wave */
.hero-copy{bottom:max(15vh,calc(var(--wave-h) + 36px))}
.hero-status{bottom:max(14vh,calc(var(--wave-h) + 36px))}
.scroll{
    bottom:calc(var(--wave-h) + 18px);
    transition:opacity .35s ease,transform .35s ease;
}
.scroll.is-hidden{
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
}

/* the section below starts pure white so the wave blends in */
.intro{
    background:radial-gradient(circle at 96% 45%,rgba(22,33,62,.05),transparent 30%),#fff;
}

@media(prefers-reduced-motion:reduce){
    .hero-wave .wave{animation:none}
    .scroll{transition:none}
}

/* scroll hint: centered above the wave, clear of the status card */
.scroll{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    white-space:nowrap;
}
.scroll.is-hidden{
    transform:translate(-50%,12px);
}
.hero-status{bottom:max(14vh,calc(var(--wave-h) + 40px))}
@media(max-width:700px){
    .scroll{display:block}
}


/* =========================================================
   OCEANX SERVICES – FULL-SCREEN STACKING SLIDES (desktop)
   Each service slides up and covers the full screen.
   ========================================================= */
@media(min-width:1101px){
    .services{
        padding:120px 0 0;
    }
    .services .section-lead{
        padding:0 2.2vw;
    }
    .service-stack{
        max-width:none;
        width:100%;
        margin:0;
        background:#0d1529;
    }
    .service-card{
        position:sticky;
        top:0;
        width:100%;
        height:100vh;
        height:100svh;
        min-height:100vh;
        min-height:100svh;
        margin:0;
        border-radius:0;
        box-shadow:0 -30px 80px rgba(0,0,0,.35);
        grid-template-columns:1.1fr .9fr;
        will-change:transform;
    }
    .service-card img{
        height:100%;
        min-height:0;
    }
    .service-card>div{
        padding:150px clamp(40px,5vw,96px) clamp(40px,6vh,70px);
        justify-content:flex-start;
    }
    .service-card small{
        font-size:13px;
        letter-spacing:.08em;
    }
    .service-card h3{
        font-size:clamp(40px,4.4vw,76px);
        line-height:1.02;
        margin:clamp(40px,9vh,110px) 0 22px;
    }
    .service-card p{
        font-size:clamp(17px,1.35vw,22px);
        max-width:520px;
    }
    .service-card span{
        font-size:13px;
    }
}
/* Footer: remove the horizontal line across the dotted OCEANX letters */
.site-footer .footer-bottom,
footer .footer-bottom{border-top:0 !important}

/* Footer cursor: smaller ring + dot */
.site-footer .footer-cursor-ring{width:30px;height:30px;border:1.5px solid rgba(255,255,255,.85)}
.site-footer .footer-cursor-dot{width:4px;height:4px}


/* ===== Quote form polish ===== */
#quoteForm{
  box-shadow:0 30px 70px rgba(6,10,24,.35);
  border:1px solid rgba(255,255,255,.22);
}

/* section labels with line */
#quoteForm label{
  display:flex;align-items:center;gap:14px;
  margin:0 0 16px;color:#fff;
  font:700 12px 'Space Mono',monospace;letter-spacing:.08em;
}
#quoteForm label:after{content:'';flex:1;height:1px;background:rgba(255,255,255,.28)}
#quoteForm label:not(:first-of-type){margin-top:32px}

/* grid: one spacing source (gap) */
#quoteForm .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
#quoteForm .field-full{grid-column:1/-1}

/* all controls same look */
#quoteForm input,
#quoteForm select,
#quoteForm textarea{
  width:100%;box-sizing:border-box;margin:0;
  height:58px;padding:0 20px;
  background:#fff;color:#16213e;
  border:1px solid transparent;border-radius:10px;
  font:500 15px 'DM Sans',sans-serif;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
#quoteForm ::placeholder{color:#8a93a6;opacity:1}

#quoteForm input:hover,
#quoteForm select:hover,
#quoteForm textarea:hover{border-color:rgba(22,33,62,.25)}

#quoteForm input:focus,
#quoteForm select:focus,
#quoteForm textarea:focus{
  outline:none;border-color:#8d9bbd;
  box-shadow:0 0 0 4px rgba(141,155,189,.38);
}
#quoteForm input:user-invalid,
#quoteForm select:user-invalid{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.22)}

/* select: custom arrow */
#quoteForm select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:50px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2316213e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center;
}
#quoteForm select:invalid{color:#8a93a6}   /* "Shipment Mode" looks like placeholder */
#quoteForm select option{color:#16213e}

/* phone: code + number */
#quoteForm .phone-group{display:grid;grid-template-columns:132px 1fr;gap:10px}
#quoteForm .phone-group select{
  padding:0 34px 0 16px;font-weight:700;
  background-position:right 14px center;
}

/* textarea */
#quoteForm textarea{
  display:block;height:130px;padding:18px 20px;margin-top:16px;
  resize:vertical;min-height:110px;line-height:1.5;
}

/* status message */
#quoteForm .quote-message{margin:16px 0 0;font:600 14px/1.5 'DM Sans',sans-serif}
#quoteForm .quote-message.success,
#quoteForm .quote-message.error{padding:14px 18px;border-radius:10px}
#quoteForm .quote-message.success{background:rgba(46,160,100,.22);border:1px solid rgba(110,231,160,.55);color:#e2ffee}
#quoteForm .quote-message.error{background:rgba(229,72,77,.2);border:1px solid rgba(255,140,140,.55);color:#ffe6e6}

/* button */
#quoteForm button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  margin-top:18px;padding:19px 34px;border:0;border-radius:999px;
  background:#fff;color:#16213e;cursor:pointer;
  font:700 12px 'Space Mono',monospace;letter-spacing:.04em;
  transition:transform .3s,box-shadow .3s,opacity .3s;
}
#quoteForm button[type="submit"]:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(6,10,24,.35)}
#quoteForm button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* tablet / mobile */
@media(max-width:575px){
  #quoteForm{padding:28px 20px}
  #quoteForm .fields{grid-template-columns:1fr}
  #quoteForm .phone-group{grid-template-columns:112px 1fr}
  #quoteForm input,#quoteForm select{height:54px}
  #quoteForm button[type="submit"]{width:100%}
}