:root {
    --navy:#071637;
    --navy2:#0d2455;
    --blue:#1e56c8;
    --accent:#ffb800;
    --orange:#ff6a00;
    --mist:#f5f7fb;
    --line:#dfe5ee;
    --text:#14213d;
    --muted:#667085;
    --green:#138a4b;
    --red:#c92a2a;
    --shadow:0 18px 50px rgba(7,22,55,.10);
    --radius:18px;
    --sans:'Ubuntu',sans-serif;
    --display:'Josefin Sans',sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:var(--sans);
    color:var(--text);
    background:#fff;
    line-height:1.6
}

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

button,input,select,textarea {
    font:inherit
}

button {
    cursor:pointer
}

.container {
    width:min(1160px,calc(100% - 40px));
    margin:auto
}

.topbar {
    background:var(--navy);
    color:#fff;
    font-size:12px
}

.topbar-inner {
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    opacity:.9
}

.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)
}

.nav-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:76px;
    gap:25px
}

.brand {
    display:flex;
    align-items:center;
    gap:11px
}

.brand-mark {
    width:43px;
    height:43px;
    border-radius:13px;
    background:linear-gradient(135deg,var(--navy),var(--navy2));
    display:grid;
    place-items:center;
    color:var(--accent);
    font-size:21px;
    box-shadow:var(--shadow)
}

.brand b {
    font:800 20px/1 var(--display);
    letter-spacing:-.03em
}

.brand em {
    font-style:normal;
    color:var(--orange)
}

.brand small {
    display:block;
    font:700 9px/1.4 var(--display);
    letter-spacing:.27em;
    color:#788397;
    margin-top:4px
}

.main-nav {
    display:flex;
    align-items:center;
    gap:25px;
    font:700 13px var(--display);
    text-transform:uppercase
}

.main-nav a {
    padding:28px 0;
    position:relative
}

.main-nav a.active:after,.main-nav a:hover:after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    height:2px;
    background:var(--orange)
}

.main-nav .nav-cta {
    background:var(--orange);
    color:#fff;
    padding:12px 17px;
    border-radius:11px
}

.main-nav .nav-cta:after {
    display:none
}

.menu-toggle {
    display:none;
    border:0;
    background:var(--navy);
    color:#fff;
    border-radius:11px;
    padding:10px 13px
}

.hero {
    background:linear-gradient(120deg,rgba(7,22,55,.97),rgba(10,39,91,.88)),url('../images/hero.svg') center/cover;
    min-height:650px;
    color:#fff;
    display:grid;
    align-items:center
}

.hero-grid {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:55px;
    align-items:center
}

.eyebrow {
    display:inline-flex;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    padding:7px 12px;
    font-size:12px;
    font-weight:700
}

.hero h1 {
    font:800 clamp(43px,6vw,72px)/1 var(--display);
    margin:20px 0 18px;
    letter-spacing:-.04em
}

.hero h1 span {
    color:var(--accent)
}

.hero p {
    font-size:17px;
    color:rgba(255,255,255,.76);
    max-width:650px
}

.actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:12px;
    padding:12px 18px;
    font-weight:700
}

.btn-primary {
    background:var(--orange);
    color:#fff
}

.btn-secondary {
    background:#fff;
    color:var(--navy);
    border:1px solid var(--line)
}

.btn-dark {
    background:var(--navy);
    color:#fff
}

.hero .btn-secondary {
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.2);
    color:#fff
}

.quote-card {
    background:#fff;
    color:var(--text);
    border-radius:22px;
    padding:26px;
    box-shadow:0 25px 70px rgba(0,0,0,.25)
}

.quote-card h3 {
    font:800 25px var(--display);
    margin:0 0 4px
}

.quote-card p {
    font-size:13px;
    color:var(--muted);
    margin:0 0 18px
}

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

.form-group {
    display:flex;
    flex-direction:column;
    gap:6px
}

.form-group.full {
    grid-column:1/-1
}

.form-group label {
    font-size:12px;
    font-weight:700;
    color:#536078
}

.input,.select,.textarea {
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    padding:11px 12px;
    outline:none
}

.input:focus,.select:focus,.textarea:focus {
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(30,86,200,.1)
}

.textarea {
    min-height:110px;
    resize:vertical
}

.section {
    padding:85px 0
}

.section.mist {
    background:var(--mist)
}

.section-head {
    text-align:center;
    max-width:720px;
    margin:0 auto 42px
}

.section-head h2 {
    font:800 38px/1.1 var(--display);
    margin:0 0 12px
}

.section-head p {
    color:var(--muted);
    margin:0
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:25px;
    box-shadow:0 8px 28px rgba(7,22,55,.05)
}

.card h3 {
    font:800 21px var(--display);
    margin:14px 0 8px
}

.card p {
    color:var(--muted);
    font-size:14px;
    margin:0
}

.icon {
    width:46px;
    height:46px;
    border-radius:13px;
    background:#edf3ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    font-weight:800
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center
}

.split img {
    border-radius:24px;
    box-shadow:var(--shadow);
    background:var(--mist);
    padding:12px
}

.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}

.step {
    padding:22px;
    border-radius:16px;
    background:var(--mist);
    border:1px solid var(--line)
}

.step strong {
    font:800 30px var(--display);
    color:var(--orange)
}

.step h3 {
    font:800 18px var(--display);
    margin:7px 0
}

.step p {
    font-size:13px;
    color:var(--muted)
}

.trust-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px
}

.trust {
    padding:18px;
    border:1px solid var(--line);
    border-radius:14px
}

.trust b {
    display:block;
    font:800 17px var(--display);
    margin-bottom:5px
}

.trust span {
    font-size:12px;
    color:var(--muted)
}

.cta {
    background:var(--navy);
    color:#fff;
    border-radius:25px;
    padding:45px
}

.cta h2 {
    font:800 38px var(--display);
    margin:0
}

.cta p {
    color:rgba(255,255,255,.7);
    max-width:650px
}

.footer {
    background:#050d24;
    color:#fff;
    padding:55px 0 20px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:35px
}

.footer p,.footer a {
    color:rgba(255,255,255,.65);
    font-size:13px
}

.footer a {
    display:block;
    margin:8px 0
}

.footer h4 {
    margin:0 0 14px
}

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:35px;
    padding-top:18px;
    color:rgba(255,255,255,.45);
    font-size:12px
}

.footer-brand {
    margin-bottom:16px
}

.whatsapp {
    position:fixed;
    right:22px;
    bottom:22px;
    background:#25d366;
    color:#fff;
    width:53px;
    height:53px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:800;
    box-shadow:0 12px 30px rgba(37,211,102,.35);
    z-index:70
}

.page-hero {
    background:linear-gradient(120deg,var(--navy),var(--navy2));
    color:#fff;
    padding:75px 0
}

.page-hero h1 {
    font:800 48px var(--display);
    margin:0 0 8px
}

.page-hero p {
    color:rgba(255,255,255,.7);
    max-width:700px
}

.tracking-box {
    max-width:720px;
    margin:-35px auto 0;
    position:relative;
    background:#fff;
    border-radius:18px;
    padding:22px;
    box-shadow:var(--shadow);
    border:1px solid var(--line)
}

.track-result {
    margin-top:25px
}

.status {
    display:inline-flex;
    border-radius:999px;
    padding:5px 10px;
    font-size:11px;
    font-weight:800
}

.status.green {
    background:#e6f7ed;
    color:var(--green)
}

.status.orange {
    background:#fff1e8;
    color:#a94d0d
}

.status.blue {
    background:#eaf1ff;
    color:var(--blue)
}

.status.red {
    background:#feecec;
    color:var(--red)
}

.timeline {
    position:relative;
    padding-left:28px
}

.timeline:before {
    content:'';
    position:absolute;
    left:8px;
    top:5px;
    bottom:5px;
    width:2px;
    background:var(--line)
}

.timeline-item {
    position:relative;
    padding:0 0 25px
}

.timeline-item:before {
    content:'';
    position:absolute;
    left:-26px;
    top:5px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--blue);
    border:3px solid #fff;
    box-shadow:0 0 0 1px var(--blue)
}

.timeline-item.done:before {
    background:var(--green);
    box-shadow:0 0 0 1px var(--green)
}

.timeline-item h4 {
    margin:0;
    font-size:15px
}

.timeline-item p {
    margin:3px 0;
    color:var(--muted);
    font-size:12px
}

.table-wrap {
    overflow:auto
}

.table {
    width:100%;
    border-collapse:collapse
}

.table th,.table td {
    text-align:left;
    padding:13px;
    border-bottom:1px solid var(--line);
    font-size:13px
}

.table th {
    font-size:11px;
    text-transform:uppercase;
    color:var(--muted);
    letter-spacing:.05em
}

.flash {
    position:fixed;
    right:20px;
    top:95px;
    z-index:100;
    background:var(--navy);
    color:#fff;
    border-radius:12px;
    padding:13px 17px;
    box-shadow:var(--shadow);
    font-size:13px
}

.flash.success {
    background:var(--green)
}

.flash.error {
    background:var(--red)
}

.empty {
    padding:35px;
    text-align:center;
    color:var(--muted);
    background:var(--mist);
    border-radius:14px
}

.faq details {
    border-bottom:1px solid var(--line);
    padding:17px 0
}

.faq summary {
    cursor:pointer;
    font-weight:700
}

.faq p {
    color:var(--muted);
    font-size:14px
}

.port-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}

.port-card {
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    background:#fff
}

.port-card small {
    color:var(--blue);
    font-weight:700
}

.port-card h3 {
    margin:6px 0;
    font:800 19px var(--display)
}

.port-card p {
    font-size:13px;
    color:var(--muted)
}

.admin-body {
    background:var(--mist)
}

.admin-sidebar {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:245px;
    background:var(--navy);
    color:#fff;
    padding:22px;
    display:flex;
    flex-direction:column;
    z-index:60
}

.admin-sidebar .brand {
    margin-bottom:35px
}

.admin-sidebar .brand b {
    font-size:16px
}

.admin-sidebar nav a {
    display:block;
    padding:12px 13px;
    border-radius:10px;
    color:rgba(255,255,255,.7);
    font-size:13px;
    font-weight:700;
    margin:4px 0
}

.admin-sidebar nav a:hover,.admin-sidebar nav a.active {
    background:rgba(255,255,255,.1);
    color:#fff
}

.admin-user {
    margin-top:auto;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:15px;
    font-size:12px
}

.admin-user span {
    display:block;
    color:rgba(255,255,255,.5)
}

.admin-main {
    margin-left:245px;
    min-height:100vh
}

.admin-top {
    height:75px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 28px
}

.admin-top strong {
    display:block;
    font:800 21px var(--display)
}

.admin-top span {
    display:block;
    font-size:12px;
    color:var(--muted)
}

.admin-content {
    padding:28px
}

.admin-content .menu-toggle {
    display:none
}

.admin-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px
}

.admin-stat {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px
}

.admin-stat span {
    font-size:12px;
    color:var(--muted)
}

.admin-stat strong {
    display:block;
    font:800 30px var(--display);
    margin-top:4px
}

.admin-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:18px;
    margin-top:18px
}

.admin-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px
}

.admin-card h2 {
    font:800 19px var(--display);
    margin:0 0 16px
}

.admin-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:18px
}

.admin-actions form {
    display:flex;
    gap:8px
}

.admin-actions .input {
    min-width:250px
}

.pagination {
    display:flex;
    gap:7px;
    margin-top:18px
}

.pagination a {
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:12px
}

.pagination a.active {
    background:var(--navy);
    color:#fff
}

.modal {
    position:fixed;
    inset:0;
    background:rgba(2,10,28,.6);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:120
}

.modal.show {
    display:flex
}

.modal-box {
    background:#fff;
    width:min(700px,100%);
    max-height:90vh;
    overflow:auto;
    border-radius:18px;
    padding:25px
}

.modal-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}

.close {
    border:0;
    background:var(--mist);
    border-radius:8px;
    padding:8px
}

.notice {
    padding:12px 14px;
    border-radius:10px;
    background:#edf3ff;
    color:#1f4b9e;
    font-size:13px
}

.checkbox-row {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:13px
}

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

.muted {
    color:var(--muted);
    font-size:12px
}

.danger {
    color:var(--red)
}

@media(max-width:900px) {
    .topbar-inner {
        display:none
    }

    .main-nav {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:76px;
        background:#fff;
        border-bottom:1px solid var(--line);
        padding:10px 20px;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }

    .main-nav.open {
        display:flex
    }

    .main-nav a {
        padding:13px
    }

    .main-nav a.active:after,.main-nav a:hover:after {
        bottom:5px
    }

    .menu-toggle {
        display:block
    }

    .hero-grid,.split {
        grid-template-columns:1fr
    }

    .cards,.port-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .steps {
        grid-template-columns:repeat(2,1fr)
    }

    .trust-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .admin-sidebar {
        transform:translateX(-100%);
        transition:.2s
    }

    .admin-sidebar.open {
        transform:translateX(0)
    }

    .admin-main {
        margin-left:0
    }

    .admin-content .menu-toggle {
        display:block
    }

    .admin-stats {
        grid-template-columns:repeat(2,1fr)
    }

    .admin-grid {
        grid-template-columns:1fr
    }

}

@media(max-width:600px) {
    .container {
        width:min(100% - 28px,1160px)
    }

    .hero {
        min-height:auto;
        padding:70px 0
    }

    .hero h1 {
        font-size:44px
    }

    .form-grid,.cards,.port-grid,.steps,.trust-grid,.footer-grid,.admin-stats {
        grid-template-columns:1fr
    }

    .form-group.full {
        grid-column:auto
    }

    .section {
        padding:60px 0
    }

    .page-hero h1 {
        font-size:38px
    }

    .tracking-box {
        margin:20px 14px 0
    }

    .admin-content {
        padding:16px
    }

    .admin-actions {
        align-items:stretch;
        flex-direction:column
    }

    .admin-actions form {
        width:100%
    }

    .admin-actions .input {
        min-width:0;
        flex:1
    }

    .table th,.table td {
        white-space:nowrap
    }

    .cta {
        padding:30px 22px
    }

}

/* ---------- AreaExpress UI refresh ---------- */ :root {
    --navy:#071637;
    --navy-2:#102b63;
    --orange:#ff6a00;
    --gold:#ffb800;
    --blue:#2867d8;
    --ink:#101b33;
    --muted:#68758d;
    --mist:#f5f8fc;
    --line:#e2e8f1;
    --white:#fff;
    --success:#168a4b;
    --danger:#d9363e;
    --shadow-sm:0 8px 24px rgba(7,22,55,.06);
    --shadow-md:0 18px 45px rgba(7,22,55,.10);
    --shadow-lg:0 28px 80px rgba(7,22,55,.16)
}

body {
    overflow-x:hidden
}

.site-header {
    box-shadow:0 4px 22px rgba(7,22,55,.045)
}

.topbar-inner {
    min-height:34px
}

.topbar-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    margin-right:7px;
    box-shadow:0 0 0 4px rgba(255,184,0,.12)
}

.topbar-separator {
    opacity:.45;
    margin:0 4px
}

.brand-logo {
    display:block;
    width:220px;
    height:auto;
    object-fit:contain
}

.main-nav {
    gap:20px
}

.main-nav a {
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap
}

.main-nav .nav-cta {
    box-shadow:0 9px 20px rgba(255,106,0,.2)
}

.nav-cta .icon-svg {
    stroke:currentColor
}

.hero {
    position:relative;
    overflow:hidden
}

.hero:after {
    content:'';
    position:absolute;
    inset:auto -8% -25% 35%;
    height:420px;
    background:radial-gradient(circle,rgba(255,184,0,.14),transparent 66%);
    pointer-events:none
}

.hero-grid {
    position:relative;
    z-index:1
}

.hero h1 {
    max-width:760px
}

.eyebrow {
    letter-spacing:.03em
}

.btn {
    min-height:44px;
    gap:8px;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}

.btn:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(7,22,55,.12)
}

.btn-primary:hover {
    background:#e95e00
}

.btn-dark:hover {
    background:#10244e
}

.quote-card {
    border:1px solid rgba(255,255,255,.2)
}

.quote-card:before {
    content:'';
    display:block;
    width:48px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--orange),var(--gold));
    margin-bottom:18px
}

.section-head h2 {
    letter-spacing:-.035em
}

.card {
    position:relative;
    overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}

.card:after {
    content:'';
    position:absolute;
    right:-40px;
    top:-45px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(40,103,216,.035);
    pointer-events:none
}

.card:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
    border-color:#d1dceb
}

.icon {
    flex:0 0 auto
}

.icon-feature {
    width:54px;
    height:54px;
    border-radius:16px;
    background:linear-gradient(135deg,#edf4ff,#f8fbff);
    color:var(--blue);
    border:1px solid #dbe7fb;
    display:grid;
    place-items:center;
    box-shadow:inset 0 1px rgba(255,255,255,.8)
}

.icon-svg {
    display:block;
    width:22px;
    height:22px
}

.icon-xs {
    width:15px;
    height:15px
}

.icon-sm {
    width:19px;
    height:19px
}

.icon-md {
    width:25px;
    height:25px
}

.icon-lg {
    width:42px;
    height:42px
}

.step {
    transition:transform .18s ease,box-shadow .18s ease
}

.step:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow-sm)
}

.trust {
    background:#fff;
    transition:transform .18s ease,box-shadow .18s ease
}

.trust:hover {
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm)
}

.cta {
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-lg)
}

.cta:after {
    content:'';
    position:absolute;
    right:-120px;
    top:-150px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,184,0,.08)
}

.cta>* {
    position:relative;
    z-index:1
}

.footer-logo {
    display:block;
    width:235px;
    height:auto;
    margin-bottom:18px;
    filter:brightness(0) invert(1);
    opacity:.95
}

.footer a {
    display:flex;
    align-items:center;
    gap:8px
}

.footer a:hover {
    color:#fff
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px
}

.whatsapp {
    transition:transform .18s ease,box-shadow .18s ease
}

.whatsapp:hover {
    transform:translateY(-3px) scale(1.03)
}

.flash {
    display:flex;
    align-items:center;
    gap:9px;
    max-width:min(520px,calc(100vw - 32px));
    animation:flash-in .25s ease
}

.page-hero {
    position:relative;
    overflow:hidden
}

.page-hero:after {
    content:'';
    position:absolute;
    right:-100px;
    bottom:-220px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,184,0,.07)
}

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

.tracking-box {
    box-shadow:var(--shadow-lg)
}

.tracking-box .input {
    min-height:50px
}

.status {
    gap:5px;
    align-items:center
}

.empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:180px
}

.empty strong {
    font:800 18px var(--display);
    color:var(--ink)
}

.empty-icon {
    color:var(--blue);
    margin-bottom:3px
}

.route-arrow {
    color:var(--orange);
    font-weight:800
}

.admin-body {
    min-height:100vh
}

.admin-sidebar {
    box-shadow:8px 0 28px rgba(7,22,55,.10)
}

.admin-brand {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    text-decoration:none;
    margin-bottom:35px
}

.admin-brand img {
    width:185px;
    height:auto;
    opacity:.97;
    object-fit:contain
}

.admin-brand span {
    font-size:9px;
    letter-spacing:.26em;
    color:rgba(255,255,255,.52);
    font-weight:800;
    padding-left:3px
}

.admin-sidebar nav a {
    display:flex;
    align-items:center;
    gap:10px
}

.admin-sidebar nav a .icon-svg {
    opacity:.75
}

.admin-sidebar nav a:hover .icon-svg,.admin-sidebar nav a.active .icon-svg {
    opacity:1
}

.admin-user {
    display:flex;
    align-items:center;
    gap:10px
}

.admin-user>div:last-child {
    min-width:0
}

.admin-user strong {
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.avatar {
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--orange),var(--gold));
    color:#fff;
    display:grid;
    place-items:center;
    font:800 14px var(--display);
    flex:0 0 auto
}

.admin-top {
    box-shadow:0 2px 16px rgba(7,22,55,.035)
}

.admin-top>div {
    flex:1
}

.admin-top .section-kicker {
    display:block
}

.top-site-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:10px
}

.top-site-link:hover {
    color:var(--navy);
    border-color:#cbd6e5
}

.admin-page-title {
    font:800 27px var(--display);
    margin:5px 0 0;
    letter-spacing:-.03em
}

.section-kicker {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:800;
    color:var(--orange)
}

.search-form {
    display:flex;
    gap:8px
}

.btn-small {
    min-height:38px;
    padding:9px 12px;
    font-size:12px
}

.admin-card {
    box-shadow:var(--shadow-sm)
}

.admin-stat {
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-sm)
}

.admin-stat:after {
    content:'';
    position:absolute;
    width:80px;
    height:80px;
    right:-25px;
    bottom:-30px;
    border-radius:50%;
    background:rgba(40,103,216,.06)
}

.admin-stat strong {
    letter-spacing:-.03em
}

.modal {
    backdrop-filter:blur(5px)
}

.modal-box {
    box-shadow:var(--shadow-lg)
}

@keyframes flash-in {
    from {
        opacity:0;
        transform:translateY(-8px)
    }

    to {
        opacity:1;
        transform:none
    }

}

@media(max-width:1050px) {
    .main-nav {
        gap:12px;
        font-size:12px
    }

    .brand-logo {
        width:195px
    }

    .hero-grid {
        gap:30px
    }

    .admin-sidebar {
        width:225px
    }

    .admin-main {
        margin-left:225px
    }

}

@media(max-width:900px) {
    .topbar {
        display:none
    }

    .nav-wrap {
        min-height:70px
    }

    .brand-logo {
        width:190px
    }

    .main-nav {
        top:70px;
        box-shadow:0 18px 30px rgba(7,22,55,.10);
        border-radius:0 0 16px 16px;
        padding:10px 14px 16px
    }

    .main-nav a {
        padding:13px 10px
    }

    .main-nav .nav-cta {
        justify-content:center;
        margin-top:5px
    }

    .hero {
        min-height:0;
        padding:70px 0
    }

    .hero-grid {
        grid-template-columns:1fr
    }

    .hero h1 {
        max-width:680px
    }

    .hero .quote-card {
        max-width:720px
    }

    .section {
        padding:70px 0
    }

    .cards,.port-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .admin-sidebar {
        width:280px
    }

    .admin-main {
        margin-left:0
    }

    .admin-content {
        padding:22px
    }

    .admin-top {
        padding:0 20px
    }

    .admin-top .menu-toggle {
        display:grid
    }

    .admin-stats {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .admin-grid {
        grid-template-columns:1fr
    }

    .search-form {
        width:100%
    }

    .admin-actions .search-form .input {
        flex:1
    }

    .admin-sidebar.open {
        box-shadow:15px 0 45px rgba(0,0,0,.22)
    }

}

@media(max-width:600px) {
    .container {
        width:calc(100% - 28px)
    }

    .brand-logo {
        width:170px
    }

    .hero {
        padding:54px 0 60px
    }

    .hero h1 {
        font-size:40px;
        line-height:1.04
    }

    .hero p {
        font-size:15px
    }

    .actions {
        flex-direction:column;
        align-items:stretch
    }

    .actions .btn {
        width:100%
    }

    .quote-card {
        padding:20px
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .form-group.full {
        grid-column:auto
    }

    .section {
        padding:55px 0
    }

    .section-head {
        margin-bottom:30px
    }

    .section-head h2 {
        font-size:31px
    }

    .page-hero {
        padding:58px 0
    }

    .page-hero h1 {
        font-size:37px
    }

    .cards,.port-grid,.steps,.trust-grid,.footer-grid {
        grid-template-columns:1fr
    }

    .split {
        gap:30px
    }

    .split img {
        width:100%
    }

    .trust-grid[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns:1fr!important
    }

    .cta {
        padding:30px 22px
    }

    .cta h2 {
        font-size:31px
    }

    .footer-bottom {
        flex-direction:column;
        gap:6px
    }

    .footer-logo {
        width:205px
    }

    .whatsapp {
        width:50px;
        height:50px;
        right:16px;
        bottom:16px
    }

    .flash {
        top:80px;
        right:14px
    }

    .admin-content {
        padding:15px
    }

    .admin-top {
        height:68px;
        padding:0 15px
    }

    .admin-top .top-site-link {
        display:none
    }

    .admin-page-title {
        font-size:23px
    }

    .admin-actions {
        margin-bottom:14px
    }

    .admin-actions form {
        flex-direction:column
    }

    .admin-actions .search-form {
        display:flex
    }

    .admin-actions .search-form .btn {
        width:auto
    }

    .admin-stats {
        grid-template-columns:1fr 1fr;
        gap:10px
    }

    .admin-stat {
        padding:15px
    }

    .admin-stat strong {
        font-size:25px
    }

    .admin-card {
        padding:14px
    }

    .table th,.table td {
        padding:11px 9px
    }

    .table-wrap {
        margin:0 -14px;
        padding:0 14px
    }

    .modal {
        padding:12px
    }

    .modal-box {
        padding:20px
    }

    .admin-sidebar {
        width:min(88vw,300px)
    }

    .admin-user {
        padding-bottom:5px
    }

}

@media(max-width:390px) {
    .brand-logo {
        width:155px
    }

    .hero h1 {
        font-size:36px
    }

    .admin-stats {
        grid-template-columns:1fr
    }

    .topbar-inner {
        font-size:11px
    }

}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        transition-duration:.01ms!important
    }

}

/* --- Reference-inspired visual layer: editorial logistics cards, imagery, and mobile polish --- */ :root {
    --ink:#081a3a;
    --soft-blue:#eef4ff;
    --orange-2:#ff7a00;
    --radius-lg:24px
}

body {
    overflow-x:hidden
}

.icon-svg {
    width:20px;
    height:20px;
    display:inline-block;
    vertical-align:middle;
    flex:0 0 auto
}

.icon-xs {
    width:15px;
    height:15px
}

.icon-sm {
    width:18px;
    height:18px
}

.icon-md {
    width:22px;
    height:22px
}

.icon-lg {
    width:28px;
    height:28px
}

.site-header {
    background:var(--navy);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.1)
}

.topbar {
    background:#041027;
    color:rgba(255,255,255,.78)
}

.topbar-inner {
    min-height:34px;
    align-items:center
}

.topbar-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    margin-right:7px
}

.topbar-separator {
    opacity:.45;
    margin:0 6px
}

.nav-wrap {
    min-height:72px
}

.brand-logo {
    display:block;
    width:220px;
    height:auto;
    filter:none;
}

.main-nav {
    gap:18px
}

.main-nav a {
    color:rgba(255,255,255,.82);
    padding:25px 0;
    font-size:11px;
    letter-spacing:.02em
}

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

.main-nav a.active:after,.main-nav a:hover:after {
    background:var(--accent);
    bottom:17px
}

.main-nav .nav-cta {
    color:#fff;
    background:var(--orange);
    padding:10px 14px;
    border-radius:9px
}

.menu-toggle {
    background:#fff;
    color:var(--navy)
}

.hero {
    min-height:690px;
    background-image:linear-gradient(90deg,rgba(5,18,44,.94) 0%,rgba(5,18,44,.78) 42%,rgba(5,18,44,.42) 100%),url('../images/hero.svg');
    background-position:center;
    background-size:cover
}

.hero-grid {
    grid-template-columns:1.05fr .95fr;
    gap:60px
}

.hero h1 {
    max-width:700px
}

.hero .eyebrow {
    background:rgba(255,255,255,.08)
}

.hero-badges {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:30px
}

.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    font-size:11px;
    font-weight:700;
    color:rgba(255,255,255,.86)
}

.quote-card {
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 30px 80px rgba(0,0,0,.3)
}

.quote-card .form-group label {
    font-size:11px
}

.quote-card .btn {
    font-size:13px
}

.section {
    padding:92px 0
}

.section-head h2 {
    letter-spacing:-.025em
}

.section-kicker {
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    margin-bottom:9px
}

.section-kicker:before {
    content:'';
    width:25px;
    height:2px;
    background:var(--orange)
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.service-card {
    overflow:hidden;
    padding:0;
    transition:transform .2s ease,box-shadow .2s ease
}

.service-card:hover {
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(7,22,55,.12)
}

.service-media {
    height:145px;
    overflow:hidden;
    background:linear-gradient(135deg,var(--navy),var(--navy2));
    position:relative
}

.service-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.95
}

.service-media:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(7,22,55,.55))
}

.service-body {
    padding:21px 22px 23px
}

.service-icon {
    width:44px;
    height:44px;
    margin-top:-43px;
    position:relative;
    z-index:2;
    border-radius:13px;
    background:#fff;
    color:var(--blue);
    display:grid;
    place-items:center;
    box-shadow:0 8px 22px rgba(7,22,55,.16)
}

.service-card h3 {
    margin:14px 0 7px
}

.service-card .learn {
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:14px;
    color:var(--blue);
    font-size:12px;
    font-weight:800
}

.feature-strip {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 12px 38px rgba(7,22,55,.07);
    overflow:hidden
}

.feature-item {
    padding:22px 18px;
    border-right:1px solid var(--line);
    display:flex;
    gap:12px;
    align-items:flex-start
}

.feature-item:last-child {
    border-right:0
}

.feature-item .icon {
    width:39px;
    height:39px;
    flex:0 0 auto;
    border-radius:11px
}

.feature-item b {
    display:block;
    font-size:13px;
    margin-bottom:3px
}

.feature-item span {
    font-size:11px;
    color:var(--muted);
    line-height:1.45
}

.image-panel {
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    min-height:400px;
    background:var(--navy)
}

.image-panel img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.image-panel-overlay {
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    background:rgba(7,22,55,.9);
    color:#fff;
    padding:20px;
    border-radius:16px
}

.image-panel-overlay strong {
    display:block;
    font:800 24px var(--display);
    margin-bottom:4px
}

.image-panel-overlay span {
    font-size:12px;
    color:rgba(255,255,255,.72)
}

.industry-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.industry-card {
    min-height:150px;
    border-radius:17px;
    overflow:hidden;
    position:relative;
    background:var(--navy);
    border:1px solid var(--line)
}

.industry-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:.78;
    transition:transform .3s ease
}

.industry-card:hover img {
    transform:scale(1.05)
}

.industry-card:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(7,22,55,.05),rgba(7,22,55,.86))
}

.industry-card .industry-label {
    position:absolute;
    left:15px;
    right:15px;
    bottom:13px;
    color:#fff;
    z-index:2;
    font:800 15px var(--display)
}

.page-hero {
    position:relative;
    overflow:hidden;
    min-height:260px;
    display:flex;
    align-items:center;
    padding:65px 0;
    background:linear-gradient(90deg,rgba(7,22,55,.94),rgba(13,36,85,.76)),url('../images/hero.svg') center/cover
}

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

.page-hero:after {
    content:'CLEAR · MOVE · DELIVER';
    position:absolute;
    right:4%;
    bottom:18px;
    color:rgba(255,255,255,.08);
    font:800 70px/1 var(--display);
    letter-spacing:.04em;
    white-space:nowrap
}

.page-hero h1 {
    font-size:clamp(36px,5vw,58px);
    letter-spacing:-.03em
}

.page-hero p {
    font-size:15px;
    max-width:680px
}

.page-hero.services-hero {
    background-image:linear-gradient(90deg,rgba(7,22,55,.94),rgba(13,36,85,.7)),url('../images/port.svg')
}

.page-hero.quote-hero {
    background-image:linear-gradient(90deg,rgba(7,22,55,.95),rgba(13,36,85,.72)),url('../images/hero.svg')
}

.page-hero.track-hero {
    background-image:linear-gradient(90deg,rgba(7,22,55,.95),rgba(13,36,85,.7)),url('../images/ship.svg')
}

.page-hero.about-hero {
    background-image:linear-gradient(90deg,rgba(7,22,55,.94),rgba(13,36,85,.72)),url('../images/hero.svg')
}

.page-hero.resources-hero {
    background-image:linear-gradient(90deg,rgba(7,22,55,.94),rgba(13,36,85,.72)),url('../images/documents.svg')
}

.page-hero.contact-hero {
    background-image:linear-gradient(90deg,rgba(7,22,55,.94),rgba(13,36,85,.72)),url('../images/haulage.svg')
}

.page-breadcrumb {
    font-size:11px;
    color:rgba(255,255,255,.55);
    margin-bottom:13px
}

.page-breadcrumb a {
    color:rgba(255,255,255,.75)
}

.content-grid {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(270px,.75fr);
    gap:24px;
    align-items:start
}

.side-help {
    background:var(--navy);
    color:#fff;
    border-radius:20px;
    padding:24px;
    position:sticky;
    top:100px
}

.side-help h3 {
    font:800 23px var(--display);
    margin:0 0 8px
}

.side-help p {
    font-size:13px;
    color:rgba(255,255,255,.68)
}

.side-help a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:13px
}

.side-help a:last-child {
    border-bottom:0
}

.quote-layout {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(260px,.65fr);
    gap:22px;
    align-items:start
}

.quote-form-card {
    padding:28px
}

.quote-form-card h2 {
    font:800 27px var(--display);
    margin:0 0 5px
}

.quote-form-card>p {
    margin:0 0 23px;
    color:var(--muted);
    font-size:13px
}

.form-section-title {
    grid-column:1/-1;
    padding-top:7px;
    border-top:1px solid var(--line);
    margin-top:4px;
    font:800 15px var(--display);
    color:var(--navy)
}

.tracking-search {
    max-width:920px;
    margin:-42px auto 0;
    position:relative;
    z-index:3
}

.tracking-search .card {
    padding:20px
}

.tracking-search form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px
}

.track-layout {
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
    gap:22px
}

.track-summary {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:22px 0
}

.track-summary .trust {
    background:var(--mist)
}

.track-status-card {
    background:var(--navy);
    color:#fff;
    border-radius:20px;
    padding:24px
}

.track-status-card h3 {
    font:800 22px var(--display);
    margin:0 0 8px
}

.track-status-card p {
    color:rgba(255,255,255,.68);
    font-size:12px
}

.track-next {
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1)
}

.track-next div {
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:12px 0
}

.track-next .step-no {
    width:25px;
    height:25px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.1);
    font-size:11px;
    font-weight:800
}

.timeline-item.current:before {
    background:var(--orange);
    box-shadow:0 0 0 1px var(--orange)
}

.about-values {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.value-card {
    padding:25px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff
}

.value-card h3 {
    font:800 20px var(--display);
    margin:13px 0 7px
}

.value-card p {
    font-size:13px;
    color:var(--muted);
    margin:0
}

.dark-band {
    background:var(--navy);
    color:#fff
}

.dark-band .section-head p {
    color:rgba(255,255,255,.65)
}

.dark-band .feature-strip {
    border-color:rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    box-shadow:none
}

.dark-band .feature-item {
    border-color:rgba(255,255,255,.08)
}

.dark-band .feature-item b {
    color:#fff
}

.dark-band .feature-item span {
    color:rgba(255,255,255,.6)
}

.resource-layout {
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:30px
}

.resource-list {
    display:grid;
    gap:12px
}

.resource-item {
    display:flex;
    gap:13px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    transition:.2s
}

.resource-item:hover {
    border-color:#b9c8e8;
    transform:translateX(3px)
}

.resource-item .icon {
    width:40px;
    height:40px;
    flex:0 0 auto
}

.resource-item h3 {
    margin:0 0 3px;
    font:800 16px var(--display)
}

.resource-item p {
    margin:0;
    font-size:12px;
    color:var(--muted)
}

.resource-tabs {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:20px
}

.resource-tab {
    border:1px solid var(--line);
    background:#fff;
    padding:8px 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    color:var(--muted)
}

.resource-tab.active {
    background:var(--navy);
    border-color:var(--navy);
    color:#fff
}

.contact-layout {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
    gap:24px
}

.contact-card {
    border-radius:20px
}

.contact-info {
    display:grid;
    gap:12px;
    margin-top:20px
}

.contact-info-item {
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:13px;
    border:1px solid var(--line);
    border-radius:13px
}

.contact-info-item .icon {
    width:38px;
    height:38px;
    flex:0 0 auto
}

.contact-info-item strong {
    display:block;
    font-size:13px
}

.contact-info-item span {
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:2px
}

.port-grid {
    grid-template-columns:repeat(3,1fr)
}

.port-card {
    position:relative;
    overflow:hidden;
    padding:0;
    min-height:220px
}

.port-card:before {
    content:'';
    display:block;
    height:95px;
    background:linear-gradient(120deg,rgba(7,22,55,.86),rgba(30,86,200,.35)),url('../images/port.svg') center/cover
}

.port-card-content {
    padding:18px
}

.port-card small {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em
}

.port-card h3 {
    font-size:16px;
    margin:5px 0
}

.port-card p {
    margin:0 0 7px
}

.footer-logo {
    filter:brightness(0) invert(1);
    width:220px;
    height:auto
}

.footer {
    position:relative
}

.footer h4 {
    font:800 14px var(--display);
    text-transform:uppercase;
    letter-spacing:.08em
}

.footer a {
    display:flex;
    align-items:center;
    gap:6px
}

.flash {
    display:flex;
    align-items:center;
    gap:8px;
    max-width:min(440px,calc(100% - 30px))
}

@media (max-width:1050px) {
    .main-nav {
        gap:13px
    }

    .main-nav a {
        font-size:10px
    }

    .brand-logo {
        width:190px
    }

    .hero-grid {
        gap:35px
    }

    .service-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .feature-strip {
        grid-template-columns:repeat(3,1fr)
    }

    .feature-item:nth-child(3) {
        border-right:0
    }

    .industry-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .track-layout,.quote-layout,.contact-layout {
        grid-template-columns:1fr
    }

    .side-help {
        position:static
    }

    .track-status-card {
        order:-1
    }

}

@media (max-width:820px) {
    .container {
        width:min(100% - 28px,720px)
    }

    .topbar-inner {
        justify-content:center;
        text-align:center
    }

    .topbar-inner>span:last-child {
        display:none
    }

    .nav-wrap {
        min-height:65px
    }

    .brand-logo {
        width:185px
    }

    .menu-toggle {
        display:inline-flex
    }

    .main-nav {
        display:none;
        position:absolute;
        left:14px;
        right:14px;
        top:65px;
        background:var(--navy);
        border:1px solid rgba(255,255,255,.1);
        border-radius:0 0 16px 16px;
        padding:10px;
        box-shadow:0 20px 50px rgba(0,0,0,.25);
        flex-direction:column;
        align-items:stretch;
        gap:0
    }

    .main-nav.is-open {
        display:flex
    }

    .main-nav a {
        padding:12px 10px
    }

    .main-nav a.active:after,.main-nav a:hover:after {
        display:none
    }

    .main-nav .nav-cta {
        margin-top:5px;
        text-align:center
    }

    .hero {
        min-height:auto;
        padding:70px 0 45px
    }

    .hero-grid {
        grid-template-columns:1fr
    }

    .hero h1 {
        font-size:clamp(40px,12vw,60px)
    }

    .hero p {
        font-size:15px
    }

    .quote-card {
        padding:20px
    }

    .section {
        padding:65px 0
    }

    .cards,.service-grid {
        grid-template-columns:1fr
    }

    .feature-strip {
        grid-template-columns:1fr 1fr
    }

    .feature-item:nth-child(2n) {
        border-right:0
    }

    .feature-item {
        border-bottom:1px solid var(--line)
    }

    .feature-item:nth-last-child(-n+2) {
        border-bottom:0
    }

    .split {
        grid-template-columns:1fr;
        gap:28px
    }

    .image-panel {
        min-height:300px
    }

    .industry-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .page-hero {
        min-height:230px;
        padding:55px 0
    }

    .page-hero:after {
        font-size:42px;
        right:-10%;
        bottom:10px
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .form-group.full {
        grid-column:auto
    }

    .track-summary {
        grid-template-columns:1fr 1fr
    }

    .tracking-search form {
        grid-template-columns:1fr
    }

    .about-values {
        grid-template-columns:1fr
    }

    .resource-layout {
        grid-template-columns:1fr
    }

    .port-grid {
        grid-template-columns:1fr
    }

    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:25px
    }

    .footer-grid>div:first-child {
        grid-column:1/-1
    }

    .cta {
        padding:30px
    }

    .cta h2 {
        font-size:31px
    }

}

@media (max-width:520px) {
    .container {
        width:calc(100% - 22px)
    }

    .topbar {
        display:none
    }

    .nav-wrap {
        min-height:62px
    }

    .main-nav {
        top:62px
    }

    .hero {
        padding-top:55px
    }

    .actions {
        flex-direction:column
    }

    .actions .btn {
        width:100%
    }

    .hero-badges {
        gap:7px
    }

    .hero-badge {
        font-size:10px
    }

    .feature-strip {
        grid-template-columns:1fr
    }

    .feature-item,.feature-item:nth-child(2n) {
        border-right:0;
        border-bottom:1px solid var(--line)
    }

    .feature-item:last-child {
        border-bottom:0
    }

    .industry-grid {
        grid-template-columns:1fr 1fr;
        gap:9px
    }

    .industry-card {
        min-height:125px
    }

    .industry-card .industry-label {
        font-size:12px
    }

    .track-summary {
        grid-template-columns:1fr
    }

    .footer-grid {
        grid-template-columns:1fr
    }

    .footer-grid>div:first-child {
        grid-column:auto
    }

    .footer-logo {
        width:190px
    }

    .whatsapp {
        right:14px;
        bottom:14px;
        width:49px;
        height:49px
    }

    .page-hero h1 {
        font-size:35px
    }

    .page-hero p {
        font-size:13px
    }

    .quote-form-card {
        padding:20px
    }

    .tracking-box {
        margin:-25px auto 0
    }

    .admin-content {
        padding:18px
    }

}

/* AreaExpress V4 final UI layer ------------------------------------------------ */ :root {
    --font-body:"Ubuntu", sans-serif;
    --font-heading:"Josefin Sans", sans-serif;
    --font-fallback:sans-serif;
}

html,body,button,input,select,textarea {
    font-family:var(--font-body),var(--font-fallback);
}

h1,h2,h3,h4,h5,h6,.main-nav,.btn,.section-kicker,.eyebrow,.step strong,.admin-page-title,.admin-top strong,.admin-card h2,.admin-stat strong,.value-card h3,.resource-item h3,.port-card h3,.quote-form-card h2,.tracking-box h2,.track-status-card h3,.side-help h3,.cta h2 {
    font-family:var(--font-heading),var(--font-fallback);
}

.brand-logo {
    filter:none!important;
    display:block;
    height:auto;
    object-fit:contain;
}

.site-header {
    isolation:isolate;
}

.main-nav {
    z-index:55;
}

.icon-svg {
    stroke:currentColor;
    fill:none;
}

.btn,.nav-cta,.menu-toggle,.top-site-link,.resource-tab {
    font-family:var(--font-body),var(--font-fallback);
}

#page-loader {
    font-family:var(--font-body),var(--font-fallback);
}

@media (max-width:820px) {
    .main-nav {
        display:none!important;
    }

    .main-nav.is-open {
        display:flex!important;
    }

    .menu-toggle {
        display:inline-flex!important;
        align-items:center;
        justify-content:center;
    }

}

@media (max-width:600px) {
    .hero h1 {
        font-family:var(--font-heading),var(--font-fallback);
    }

    .quote-card,.card,.admin-card {
        border-radius:16px;
    }

    .table-wrap {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

}

/* V5 runtime theme + interaction layer */ :root {
    --navy:var(--primary-color,#071637);
    --navy2:var(--secondary-color,#1e56c8);
    --blue:var(--secondary-color,#1e56c8);
    --orange:var(--accent-color,#ff6a00);
    --accent:var(--accent-color,#ffb800);
    --sans:var(--body-font,"Ubuntu",sans-serif);
    --display:var(--heading-font,"Josefin Sans",sans-serif)
}

.modal {
    position:fixed;
    inset:0;
    z-index:300;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(3,10,25,.72);
    backdrop-filter:blur(8px)
}

.modal.show {
    display:flex;
    animation:modal-fade .18s ease-out
}

.modal-box {
    width:min(620px,100%);
    max-height:min(90vh,760px);
    overflow:auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:0 30px 100px rgba(0,0,0,.28);
    padding:24px
}

.modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding-bottom:15px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line)
}

.modal-head h2 {
    font:800 25px var(--display)!important;
    margin:0
}

.close {
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    color:var(--text);
    font-size:22px;
    display:grid;
    place-items:center
}

.close:hover {
    background:var(--mist)
}

.modal-summary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:18px
}

.modal-summary-item {
    padding:12px;
    border-radius:12px;
    background:var(--mist);
    border:1px solid var(--line)
}

.modal-summary-item small {
    display:block;
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.05em
}

.modal-summary-item strong {
    display:block;
    margin-top:3px;
    font-size:13px
}

.service-detail {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:28px;
    align-items:start
}

.service-detail-hero {
    overflow:hidden;
    border-radius:22px;
    background:var(--mist);
    border:1px solid var(--line)
}

.service-detail-hero img {
    width:100%;
    height:340px;
    object-fit:cover;
    display:block
}

.service-detail-copy {
    padding:26px
}

.service-detail-copy h2 {
    font:800 38px/1.08 var(--display);
    margin:0 0 12px
}

.service-detail-copy p {
    color:var(--muted)
}

.service-checks {
    display:grid;
    gap:10px;
    margin:22px 0
}

.service-check {
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff
}

.service-check .icon {
    width:34px;
    height:34px;
    flex:0 0 auto
}

.service-contact {
    background:var(--navy);
    color:#fff;
    border-radius:20px;
    padding:24px;
    position:sticky;
    top:100px
}

.service-contact h3 {
    font:800 24px var(--display);
    margin:0 0 7px
}

.service-contact p {
    color:rgba(255,255,255,.68);
    font-size:13px
}

.service-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px
}

.service-actions .btn {
    flex:1;
    min-width:145px
}

.service-whatsapp {
    background:#25d366!important;
    color:#fff!important
}

.admin-page-title {
    font:800 25px var(--display);
    margin:0
}

.contact-detail-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px
}

.contact-message {
    white-space:pre-wrap;
    line-height:1.75;
    background:var(--mist);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px
}

.settings-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
}

.settings-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px
}

.settings-card h3 {
    font:800 20px var(--display);
    margin:0 0 4px
}

.settings-card>p {
    color:var(--muted);
    font-size:13px;
    margin:0 0 18px
}

.color-field {
    display:flex;
    align-items:center;
    gap:10px
}

.color-field input[type=color] {
    width:50px;
    height:42px;
    border:0;
    padding:0;
    background:transparent
}

.settings-logo-preview {
    max-width:260px;
    max-height:75px;
    object-fit:contain;
    border:1px dashed var(--line);
    border-radius:12px;
    padding:10px;
    background:var(--mist)
}

.toggle-list {
    display:grid;
    gap:12px
}

.toggle-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:12px
}

.toggle-row span {
    font-size:13px;
    font-weight:700
}

.switch {
    position:relative;
    width:48px;
    height:27px;
    flex:0 0 auto
}

.switch input {
    opacity:0;
    width:0;
    height:0
}

.switch span {
    position:absolute;
    inset:0;
    background:#cbd5e1;
    border-radius:999px;
    transition:.2s
}

.switch span:before {
    content:'';
    position:absolute;
    width:21px;
    height:21px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 2px 5px rgba(0,0,0,.18);
    transition:.2s
}

.switch input:checked+span {
    background:var(--orange)
}

.switch input:checked+span:before {
    transform:translateX(21px)
}

@keyframes modal-fade {
    from {
        opacity:0;
        transform:translateY(8px)
    }

    to {
        opacity:1;
        transform:none
    }

}

@media(max-width:900px) {
    .service-detail,.contact-detail-grid,.settings-grid {
        grid-template-columns:1fr
    }

    .service-contact {
        position:static
    }

    .service-detail-hero img {
        height:280px
    }

}

@media(max-width:600px) {
    .modal {
        padding:10px
    }

    .modal-box {
        padding:18px;
        border-radius:18px
    }

    .modal-summary {
        grid-template-columns:1fr
    }

    .service-detail-copy {
        padding:20px
    }

    .service-detail-copy h2 {
        font-size:31px
    }

    .service-actions {
        flex-direction:column
    }

    .service-actions .btn {
        width:100%
    }

}

body.modal-open {
    overflow:hidden
}

/* ==========================================================================
   V6 GLOBAL LOADER
   ========================================================================== */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #ffffff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    display: flex;
    width: min(360px, 86vw);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.loader-logo {
    display: block;
    width: min(280px, 72vw);
    max-width: 100%;
    height: auto;
    max-height: 92px;
    object-fit: contain;
}

.loader-brand-name {
    margin-top: 12px;
    color: var(--primary-color, #071637);
    font: 700 12px/1.2 var(--heading-font, "Josefin Sans"), sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.loader-ring {
    width: 34px;
    height: 34px;
    margin-top: 22px;
    border: 3px solid rgba(7, 22, 55, 0.12);
    border-top-color: var(--accent-color, #ff6a00);
    border-radius: 50%;
    animation: clearport-loader-spin 0.8s linear infinite;
}

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

}

/* ==========================================================================
   V6 HEADER WHATSAPP
   ========================================================================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    order: 3;
}

.header-whatsapp, .mobile-nav-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 700;
}

.header-whatsapp {
    min-height: 42px;
    padding: 9px 13px;
    color: #128c4a;
    background: #e9fbf1;
    border: 1px solid #bfeecf;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
}

.header-whatsapp:hover {
    background: #d9f8e6;
    border-color: #a9e7c1;
}

.header-whatsapp .icon-svg, .mobile-nav-whatsapp .icon-svg, .whatsapp-float .icon-svg {
    stroke-width: 1.8;
}

.mobile-nav-whatsapp {
    display: none !important;
}

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    display: inline-flex;
    min-width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    overflow: hidden;
    color: #fff;
    background: #25d366;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
    font-size: 12px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(37, 211, 102, 0.42);
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.footer-address {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

@media (max-width: 1050px) {
    .header-whatsapp {
        min-height: 40px;
        padding: 8px 11px;
    }

}

@media (max-width: 820px) {
    .nav-wrap {
        position: relative;
    }

    .header-actions {
        margin-left: auto;
    }

    .main-nav.is-open {
        display: flex !important;
    }

    .mobile-nav-whatsapp {
        display: flex !important;
        color: #25d366;
        background: rgba(37, 211, 102, 0.08);
        border: 1px solid rgba(37, 211, 102, 0.2);
        border-radius: 10px;
        margin-top: 4px;
    }

    .header-whatsapp span {
        display: inline;
    }

}

@media (max-width: 520px) {
    .header-whatsapp {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 0;
    }

    .header-whatsapp .icon-svg {
        width: 19px;
        height: 19px;
    }

    .menu-toggle {
        padding: 9px 11px;
    }

    .whatsapp-float {
        right: 14px;
        bottom: 14px;
        width: 51px;
        min-width: 51px;
        height: 51px;
        padding: 0;
    }

    .whatsapp-float span {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    #page-loader {
        transition: none;
    }

    .loader-ring {
        animation: none;
    }

}

/* Keep the configured brand logo visible inside the dark operations sidebar. */
.admin-brand {
    padding: 10px 12px;
    background: #ffffff;
    border-radius: 14px;
}

.admin-brand img {
    width: 185px;
    height: auto;
    opacity: 1;
    object-fit: contain;
}

.admin-brand span {
    color: #64748b;
}

/* AreaExpress service image management */
.service-admin-thumb{width:58px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#f3f6fb}
.service-image-preview-wrap{margin-top:10px;padding:12px;background:#f5f7fb;border:1px dashed #cbd5e1;border-radius:12px;display:flex;justify-content:center;align-items:center;min-height:120px}
.service-image-preview-wrap img{display:block;max-width:100%;width:210px;height:120px;object-fit:contain;border-radius:8px}

/* Branded, accessible confirmation dialog */
.confirm-modal{z-index:300;background:rgba(4,13,34,.72);backdrop-filter:blur(5px)}
.confirm-modal-box{max-width:460px;text-align:center;padding:32px 30px;border:1px solid rgba(255,255,255,.7);box-shadow:0 28px 90px rgba(4,13,34,.28);animation:confirm-pop .2s ease-out}
.confirm-symbol{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 17px;border-radius:18px;background:#fff1e8;color:#c44d08;font-size:27px;font-weight:800;box-shadow:inset 0 0 0 1px #ffd9c4}
.confirm-copy h2{font:800 25px var(--display);color:var(--navy);margin:7px 0 8px}
.confirm-copy p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
.confirm-actions{display:flex;justify-content:center;gap:10px;margin-top:25px;flex-wrap:wrap}
.btn-danger{background:#c53b35!important;color:#fff!important;border:1px solid #c53b35!important}
.btn-danger:hover{background:#a92d28!important}
@keyframes confirm-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.admin-export-actions{margin:0 0 12px}

/* Shipment tracking print document */
.print-shipment-brand,.print-document-footer{display:none}
.tracking-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media print{
 @page{size:A4;margin:14mm}
 body{background:#fff!important;color:#172033!important;font-size:10.5pt}
 #page-loader,.site-header,.site-footer,.page-hero,.tracking-search,.track-status-card,.tracking-actions,.main-nav,.whatsapp-float{display:none!important}
 body *{visibility:hidden!important}
 .track-layout,.track-layout *{visibility:visible!important}
 .track-layout{display:block!important;margin:0!important}
 .track-layout>.card{border:0!important;box-shadow:none!important;padding:0!important;width:100%!important;max-width:none!important}
 .track-layout .admin-actions{display:flex!important;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #d8dee8;padding-bottom:15px;margin-bottom:15px}
 .print-shipment-brand{visibility:visible!important;display:flex!important;align-items:center;gap:16px;padding:0 0 16px;margin-bottom:18px;border-bottom:3px solid #ff6a00}
 .print-shipment-brand *{visibility:visible!important}
 .print-shipment-brand img{width:150px;max-height:64px;object-fit:contain}
 .print-shipment-brand>div:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1}
 .print-shipment-brand strong{font-size:15pt;color:#071637}
 .print-shipment-brand span,.print-shipment-brand small{color:#5d687a;font-size:9pt}
 .print-doc-label{font-size:9pt;letter-spacing:.1em;font-weight:800;color:#1e56c8;max-width:120px;text-align:right}
 .track-summary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 24px}
 .track-summary .trust{border:1px solid #dce2eb;border-radius:8px;padding:10px}
 .track-summary .trust b{display:block;font-size:8pt;text-transform:uppercase;color:#667085}
 .track-summary .trust span{display:block;font-size:10pt;font-weight:700;margin-top:4px}
 .timeline-item{break-inside:avoid}
 .print-document-footer{visibility:visible!important;display:flex!important;justify-content:space-between;gap:12px;border-top:1px solid #dce2eb;padding-top:12px;margin-top:25px;color:#667085;font-size:8pt}
 .print-document-footer *{visibility:visible!important}
 .track-layout .card h3{font-size:15pt!important}
}


/* AreaExpress cargo intake form */
.cargo-choice-list{display:flex;flex-direction:column;gap:12px;padding:8px 0}.cargo-choice-list label,.cargo-document-check{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500}.cargo-choice-list input[type=radio],.cargo-document-check input[type=checkbox]{width:19px;height:19px;accent-color:var(--secondary-color);flex:0 0 auto}.cargo-document-check{align-items:flex-start}.cargo-document-check input{margin-top:4px}.cargo-document-check+p{margin:8px 0 0 30px}.cargo-choice-list label:hover,.cargo-document-check:hover{color:var(--secondary-color)}