@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{
    --navy:#071a33;
    --navy-2:#0d2848;
    --blue:#4283e4;
    --blue-dark:#2466c7;
    --ink:#041326;
    --text:#536174;
    --muted:#7c8796;
    --bg:#f7f9fc;
    --white:#fff;
    --line:#e3e8ef;
    --soft:#edf4ff;
    --shadow:0 20px 60px rgba(4,19,38,.10);
    --shadow-lg:0 30px 80px rgba(4,19,38,.16);
    --display:"Manrope",sans-serif;
    --sans:"DM Sans",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:var(--sans);
    color:var(--text);
    background:var(--bg);
    line-height:1.75;
}
a{text-decoration:none;transition:.25s ease}
img{max-width:100%;height:auto}
.container{max-width:1180px}

/* PRELOADER */
#preloader-active{
    position:fixed;
    inset:0;
    z-index:999999;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .35s ease,visibility .35s ease;
}
#preloader-active.preloader-hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-ring{
    width:70px;height:70px;border-radius:50%;
    border:2px solid rgba(66,131,228,.15);
    border-top-color:var(--blue);
    border-right-color:var(--navy);
    animation:spin .9s linear infinite;
}
#preloader-active img{
    position:absolute;
    width:auto;height:40px;border-radius:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* NAV */
.site-header {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 24px;
}

.nav-container {
    width: 100%;
    max-width: 1240px;
    min-height: 76px;
    margin: 0 auto;
    padding: 0 18px 0 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(227, 232, 239, 0.9);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(4, 19, 38, 0.10);
    backdrop-filter: blur(14px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    text-decoration: none;
}

.brand img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 9px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-name {
    color: var(--navy);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 800;
}

.brand-subtitle {
    margin-top: 4px;
    color: var(--blue);
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.main-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.main-nav > a {
    position: relative;
    padding: 28px 0;
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.25s ease;
}

.main-nav > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.main-nav > a:hover,
.main-nav > a.active {
    color: var(--blue);
}

.main-nav > a:hover::after,
.main-nav > a.active::after {
    transform: scaleX(1);
}

.nav-dropdown-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 28px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s ease;
}

.nav-dropdown-toggle:hover {
    color: var(--blue);
}

.nav-dropdown-toggle i {
    font-size: 9px;
    transition: transform 0.25s ease;
}

.nav-dropdown-wrapper:hover .nav-dropdown-toggle i,
.nav-dropdown-wrapper.open .nav-dropdown-toggle i {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% - 8px);
    left: 50%;
    width: 190px;
    padding: 10px;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(4, 19, 38, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.nav-dropdown-wrapper:hover .nav-dropdown,
.nav-dropdown-wrapper.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 11px 13px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown a:hover {
    background: var(--soft);
    color: var(--blue);
}

.nav-actions {
    flex-shrink: 0;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: var(--navy);
    color: #ffffff;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

.nav-cta:hover {
    background: var(--blue);
    color: #ffffff;
    transform: translateY(-2px);
}

.nav-cta i {
    font-size: 13px;
}

.mobile-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 8px;
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 6px 0;
    background: var(--navy);
    border-radius: 3px;
    transition: 0.25s ease;
}

.mobile-nav-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 991px) {
    .site-header {
        top: 14px;
        padding: 0 14px;
    }

    .nav-container {
        min-height: 68px;
        padding: 0 14px;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 20px 50px rgba(4, 19, 38, 0.14);
    }

    .main-nav.mobile-nav-open {
        display: flex;
    }

    .main-nav > a {
        padding: 12px;
        font-size: 14px;
    }

    .main-nav > a::after {
        display: none;
    }

    .nav-dropdown-wrapper {
        display: block;
    }

    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 12px;
        font-size: 14px;
    }

    .nav-dropdown {
        position: static;
        width: 100%;
        padding: 4px 0 4px 15px;
        transform: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
    }

    .nav-dropdown-wrapper.open .nav-dropdown {
        display: block;
    }

    .nav-dropdown a {
        padding: 10px 12px;
        font-size: 13px;
    }

    .nav-actions {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }
}

@media (max-width: 575px) {
    .brand-text {
        display: none;
    }

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

    .nav-container {
        min-height: 64px;
    }
}

/* HERO */
.contact-hero{
    position:relative;
    min-height:590px;
    display:flex;
    align-items:flex-end;
    padding:185px 0 86px;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(4,18,38,.97),rgba(7,26,51,.86) 55%,rgba(7,26,51,.66)),
        url("../img/hero/law_hero2.jpg") center/cover no-repeat;
}
.hero-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:70px 70px;
}
.contact-hero:after{
    content:"";
    position:absolute;
    width:500px;height:500px;
    right:-270px;top:140px;
    border:90px solid rgba(66,131,228,.11);
    border-radius:50%;
}
.hero-inner{position:relative;z-index:2;max-width:780px}
.eyebrow,.section-kicker{
    display:inline-block;
    color:#72a5e9;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:10px;
    font-weight:800;
}
.contact-hero .eyebrow{
    padding:8px 13px;
    margin-bottom:17px;
    color:#bfd4f1;
    border:1px solid rgba(255,255,255,.16);
    border-radius:30px;
    background:rgba(255,255,255,.05);
}
.contact-hero h1{
    margin:0;
    color:#fff;
    font:800 clamp(42px,5.4vw,68px)/1.08 var(--display);
    letter-spacing:-.045em;
}
.contact-hero p{
    max-width:690px;
    margin:23px 0 0;
    color:#c9d7e7;
    font-size:17px;
}

/* CONTACT */
.section-space{padding:90px 0}
.contact-section{background:var(--bg)}
.section-heading{
    max-width:720px;
    margin-bottom:45px;
}
.section-heading h2{
    margin:7px 0 12px;
    color:var(--navy);
    font:800 36px/1.2 var(--display);
    letter-spacing:-.03em;
}
.section-heading p{margin:0;font-size:15px;color:var(--text)}
.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(310px,.85fr);
    gap:28px;
    align-items:start;
}
.form-card,.details-card,.social-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:19px;
    box-shadow:var(--shadow);
}
.form-card{padding:40px}
.card-heading{
    display:flex;gap:15px;align-items:flex-start;
    padding-bottom:28px;margin-bottom:28px;
    border-bottom:1px solid var(--line);
}
.mini-icon{
    width:45px;height:45px;flex:0 0 45px;
    display:grid;place-items:center;
    background:var(--soft);border-radius:12px;
    color:var(--blue);font-size:14px;
}
.card-heading h3{
    margin:0 0 3px;
    color:var(--navy);
    font:800 20px var(--display);
}
.card-heading p{margin:0;font-size:12px;color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:19px}
.field label{
    display:block;margin-bottom:8px;
    color:var(--navy);
    font-size:11px;font-weight:800;
    letter-spacing:.04em;
}
.field input,.field textarea{
    width:100%;
    border:1px solid #dbe2eb;
    border-radius:10px;
    background:#fbfcfe;
    color:var(--ink);
    outline:none;
    font:13px var(--sans);
    transition:.2s ease;
}
.field input{height:50px;padding:0 15px}
.field textarea{padding:13px 15px;resize:vertical;min-height:160px}
.field input:focus,.field textarea:focus{
    border-color:var(--blue);
    background:#fff;
    box-shadow:0 0 0 3px rgba(66,131,228,.09);
}
.submit-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    min-width:155px;height:50px;padding:0 22px;
    border:0;border-radius:10px;
    background:var(--navy);color:#fff;
    font:700 12px var(--sans);
    cursor:pointer;
    transition:.25s ease;
}
.submit-btn:hover{background:var(--blue);transform:translateY(-1px)}
.submit-btn.sending{opacity:.75;pointer-events:none}

/* DETAILS */
.contact-details{display:flex;flex-direction:column;gap:18px}
.details-card{padding:31px}
.details-card h3{
    margin:5px 0 10px;
    color:var(--navy);
    font:800 24px var(--display);
}
.details-intro{margin:0 0 25px;font-size:13px}
.detail-item{
    display:flex;gap:14px;
    padding:18px 0;
    border-top:1px solid var(--line);
}
.detail-icon{
    width:42px;height:42px;flex:0 0 42px;
    display:grid;place-items:center;
    border-radius:11px;
    background:var(--soft);
    color:var(--blue);
    font-size:15px;
}
.detail-item>div{min-width:0}
.detail-label{
    display:block;
    margin-bottom:2px;
    color:var(--muted);
    font-size:9px;font-weight:800;
    letter-spacing:.13em;text-transform:uppercase;
}
.detail-item a,.detail-item strong{
    display:block;
    color:var(--navy);
    font:700 13px var(--sans);
    overflow-wrap:anywhere;
}
.detail-item a:hover{color:var(--blue)}
.detail-item small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:10px;
}
.response-note{
    display:flex;gap:11px;
    margin-top:10px;padding:17px;
    background:#f4f8ff;
    border:1px solid #e0ebfb;
    border-radius:11px;
}
.response-note>i{color:var(--blue);padding-top:3px}
.response-note strong{display:block;color:var(--navy);font-size:11px}
.response-note p{margin:2px 0 0;font-size:10px;line-height:1.55}
.social-card{
    display:flex;align-items:center;justify-content:space-between;
    padding:19px 22px;
}
.social-card>span{color:var(--navy);font-size:11px;font-weight:700}
.social-links{display:flex;gap:7px}
.social-links a{
    width:31px;height:31px;display:grid;place-items:center;
    border-radius:50%;background:#edf2f8;color:var(--navy);font-size:10px;
}
.social-links a:hover{background:var(--blue);color:#fff}

/* LOCATION VISUAL */
.map-section{padding:0 0 90px;background:var(--bg)}
.map-card{
    min-height:360px;
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border-radius:20px;
    background:var(--navy);
    box-shadow:var(--shadow-lg);
}
.map-content{
    padding:55px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;z-index:2;
}
.map-content h2{
    max-width:450px;
    margin:8px 0 13px;
    color:#fff;
    font:800 31px/1.2 var(--display);
    letter-spacing:-.03em;
}
.map-content p{
    max-width:500px;
    margin:0 0 25px;
    color:#b9c8d9;
    font-size:13px;
}
.map-btn{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 17px;border-radius:9px;
    background:#fff;color:var(--navy);
    font:700 11px var(--sans);
}
.map-btn:hover{background:var(--blue);color:#fff}
.map-visual{
    position:relative;
    min-height:360px;
    overflow:hidden;
    background:
        radial-gradient(circle at center,rgba(66,131,228,.18),transparent 42%),
        #0a2340;
}
.map-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:42px 42px;
    transform:perspective(500px) rotateX(52deg) scale(1.35);
    transform-origin:center bottom;
    opacity:.8;
}
.map-orbit{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(115,168,239,.35);
    border-radius:50%;
}
.orbit-one{width:240px;height:240px}
.orbit-two{width:360px;height:180px;transform:translate(-50%,-50%) rotate(-20deg)}
.map-pin{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-65%);
    width:64px;height:64px;
    display:grid;place-items:center;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-size:22px;
    box-shadow:0 0 0 12px rgba(66,131,228,.12),0 0 50px rgba(66,131,228,.4);
}
.map-label{
    position:absolute;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:20px;
    background:rgba(255,255,255,.06);
    color:#abc6e8;
    font-size:8px;font-weight:800;letter-spacing:.13em;
}
.label-one{top:22%;left:23%}
.label-two{top:30%;right:18%}
.label-three{bottom:19%;left:28%}

/* CTA */
.cta-section{padding:0 0 90px;background:var(--bg)}
.cta-inner{
    padding:42px 50px;
    display:flex;align-items:center;justify-content:space-between;
    gap:30px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--navy),#0e3158);
    box-shadow:var(--shadow-lg);
}
.cta-inner h2{
    margin:7px 0 4px;
    color:#fff;
    font:800 28px var(--display);
}
.cta-inner p{margin:0;color:#b8c9db;font-size:13px}
.cta-btn{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 18px;
    border-radius:9px;
    background:#fff;color:var(--navy);
    font:700 11px var(--sans);
}
.cta-btn:hover{background:var(--blue);color:#fff}

/* FOOTER */
.site-footer{background:var(--navy);color:#aebdce;padding:72px 0 0}
.footer-grid{
    display:grid;
    grid-template-columns:1.45fr .75fr 1fr 1.15fr;
    gap:55px;padding-bottom:55px;
}
.footer-logo img{width:52px;height:52px;object-fit:cover;border-radius:9px;margin-bottom:22px}
.footer-brand p{max-width:360px;margin:0 0 22px;font-size:12px;line-height:1.8}
.footer-social{display:flex;gap:8px}
.footer-social a{
    width:34px;height:34px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;color:#c4d1df;font-size:11px;
}
.footer-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.footer-column h4{margin:0 0 19px;color:#fff;font:700 14px var(--display)}
.footer-column>a{
    display:block;margin:0 0 10px;color:#aebdce;font-size:12px;
}
.footer-column>a:hover{color:#75a8ec}
.footer-newsletter p{font-size:12px;margin:0 0 17px}
.newsletter-input{
    display:flex;height:46px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:9px;overflow:hidden;
}
.newsletter-input input{
    flex:1;min-width:0;border:0;outline:0;
    padding:0 13px;background:rgba(255,255,255,.05);
    color:#fff;font:12px var(--sans);
}
.newsletter-input input::placeholder{color:#8798ac}
.newsletter-input button{
    width:48px;border:0;background:var(--blue);color:#fff;cursor:pointer;
}
.footer-bottom{
    padding:21px 0;border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
}
.footer-bottom p{margin:0;color:#8191a5;font-size:11px}

/* RESPONSIVE */
@media(max-width:991px){
    .site-header{top:14px}
    .nav-container{
        width:calc(100% - 24px);
        min-height:66px;
        padding:8px 12px 8px 15px;
        flex-wrap:wrap;
    }
    .brand{min-width:auto}
    .brand img{width:40px;height:40px}
    .brand-name{font-size:18px}
    .mobile-nav-toggle{
        display:flex;flex-direction:column;justify-content:center;gap:5px;
        width:43px;height:43px;margin-left:auto;padding:10px;
        border:1px solid #dce3ec;border-radius:10px;background:#fff;cursor:pointer;
    }
    .mobile-nav-toggle span{
        display:block;width:21px;height:2px;margin:auto;
        background:var(--navy);border-radius:4px;transition:.25s ease;
    }
    .mobile-nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .mobile-nav-toggle.active span:nth-child(2){opacity:0}
    .mobile-nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .main-nav{
        display:none;width:100%;order:3;flex-direction:column;
        align-items:stretch;gap:0;padding:7px 5px 4px;
        border-top:1px solid var(--line);
    }
    .main-nav.mobile-nav-open{display:flex}
    .main-nav a{padding:13px 8px;font-size:13px}
    .nav-actions{
        display:none;width:100%;order:4;padding:8px 5px 5px;
        border-top:1px solid var(--line);
    }
    .nav-actions.mobile-actions-open{display:block}
    .nav-cta{justify-content:center;width:100%;padding:13px}
    .contact-hero{min-height:550px;padding:170px 0 65px}
    .contact-hero h1{font-size:50px}
    .contact-grid{grid-template-columns:1fr}
    .contact-details{display:grid;grid-template-columns:1fr 1fr}
    .details-card{grid-column:1/-1}
    .map-card{grid-template-columns:1fr}
    .map-content{padding:45px}
    .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
    .footer-newsletter{grid-column:1/-1}
}
@media(max-width:767px){
    .section-space{padding:60px 0}
    .contact-hero{min-height:530px;padding:155px 0 55px}
    .contact-hero h1{font-size:40px}
    .contact-hero p{font-size:15px}
    .section-heading h2{font-size:31px}
    .form-card{padding:28px 22px}
    .field-row{grid-template-columns:1fr;gap:0}
    .contact-details{display:block}
    .map-content{padding:36px 27px}
    .map-content h2{font-size:27px}
    .map-visual{min-height:300px}
    .cta-inner{padding:32px 27px;align-items:flex-start;flex-direction:column}
    .cta-inner h2{font-size:25px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:35px 25px}
    .footer-brand{grid-column:1/-1}
    .footer-newsletter{grid-column:1/-1}
}
@media(max-width:480px){
    .brand-subtitle{display:none}
    .brand img{width:38px;height:38px}
    .contact-hero h1{font-size:34px}
    .contact-hero p{font-size:14px}
    .social-card{align-items:flex-start;flex-direction:column;gap:12px}
    .map-card{border-radius:15px}
    .map-visual{min-height:260px}
    .footer-grid{grid-template-columns:1fr}
    .footer-brand,.footer-newsletter{grid-column:auto}
}