
  :root{
    --navy-950:#0a1730;
    --navy-900:#0d1e3c;
    --navy-800:#122a52;
    --navy-700:#1a3868;
    --gold-500:#e3a94c;
    --gold-600:#d99a35;
    --gold-100:#fbe9c8;
    --cream:#f7f5f0;
    --paper:#ffffff;
    --ink:#101c33;
    --ink-soft:#4b5670;
    --ink-faint:#8a93a8;
    --line:#e6e2d8;
    --radius-s:10px;
    --radius-m:16px;
    --radius-l:28px;
    --shadow-card: 0 20px 40px -24px rgba(10,23,48,0.25);
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Plus Jakarta Sans','Inter',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
    color:var(--navy-950);
  }
  p{margin:0; color:var(--ink-soft); line-height:1.65;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{margin:0; padding:0; list-style:none;}
  button{font-family:inherit;}

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 var(--space-6);
  }
  @media (max-width:640px){
    .wrap{padding:0 var(--space-4);}
  }

  .eyebrow{
    display:inline-block;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.04em;
    color:var(--gold-600);
    margin-bottom:var(--space-3);
  }
  .eyebrow.on-dark{color:var(--gold-500);}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:999px;
    font-weight:600;
    font-size:15px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-gold{
    background:linear-gradient(180deg,var(--gold-500),var(--gold-600));
    color:var(--navy-950);
    box-shadow:0 14px 28px -12px rgba(217,154,53,0.55);
  }
  .btn-ghost-dark{
    background:transparent;
    border-color:rgba(255,255,255,0.35);
    color:#fff;
  }
  .btn-ghost-dark:hover{background:rgba(255,255,255,0.08);}
  .btn-outline-navy{
    background:transparent;
    border-color:var(--navy-800);
    color:var(--navy-900);
  }
  .btn-outline-navy:hover{background:var(--navy-900); color:#fff;}
  .btn-sm{padding:10px 18px; font-size:13.5px;}

  /* ---------- HEADER ---------- */
  /* ============ HEADER ============ */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 23, 48, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 16px var(--space-6);
    max-width: 1240px;
    margin: 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand img {
    width: 200px;
    height: auto;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #fff;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    cursor: pointer;
}

.burger span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    transition: all 0.25s ease;
}


/* ============ TABLET ============ */
@media (max-width: 1050px) {

    .nav {
        padding-left: 25px;
        padding-right: 25px;
    }

    .brand img {
        width: 170px;
    }

    .nav-links {
        gap: 18px;
    }

    .nav-links a {
        font-size: 13.5px;
    }

    .nav-right {
        gap: 10px;
    }
}


/* ============ MOBILE ============ */
@media (max-width: 900px) {

    .nav {
        position: relative;
        padding: 14px 20px;
        flex-wrap: wrap;
    }

    .brand img {
        width: 170px;
    }

    .nav-right {
        margin-left: auto;
    }

    .nav-right .btn {
        display: none;
    }

    .burger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: 8px 20px 15px;

        background: rgba(10, 23, 48, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        border-top: 1px solid rgba(255,255,255,0.05);
        border-bottom: 1px solid rgba(255,255,255,0.08);

        box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 13px 5px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .nav-links li:last-child a {
        border-bottom: none;
    }
}


/* ============ SMALL PHONES ============ */
@media (max-width: 480px) {

    .nav {
        padding: 12px 15px;
    }

    .brand img {
        width: 145px;
    }

    .burger {
        width: 40px;
        height: 40px;
    }

    .nav-links {
        padding-left: 15px;
        padding-right: 15px;
    }
}
  /* ---------- HERO ---------- */
 .hero {
    position: relative;
    background: url('img/01_hero_global_shipping-1.jpg');
     background-repeat: no-repeat;
    background-size: cover;
    background-position: 70% center;
    overflow: hidden;
    padding-top: var(--space-9);
    padding-bottom: 0;
}

/* Dark gradient overlay: darker left → transparent right */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.60) 30%,
        rgba(0, 0, 0, 0.30) 55%,
        rgba(0, 0, 0, 0.05) 80%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-glow {
    position: absolute;
    right: -180px;
    top: -160px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(70, 120, 200, 0.35),
        transparent 65%
    );
    filter: blur(10px);
    pointer-events: none;
    z-index: 1;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-6) var(--space-9);
    position: relative;
    z-index: 2;
}
  .hero h1{
    font-size:clamp(38px,5vw,58px);
    font-weight:800;
    line-height:1.04;
    color:#fff;
  }
  .hero h1 .accent{color:var(--gold-500);}
  .hero-sub{
    font-size:17px;
    font-weight:600;
    color:rgba(255,255,255,0.88);
    margin-top:var(--space-4);
  }
  .hero-copy{
    color:rgba(255,255,255,0.68);
    font-size:15.5px;
    max-width:480px;
    margin-top:var(--space-4);
  }
  .hero-actions{display:flex; gap:16px; margin-top:var(--space-6); flex-wrap:wrap;}

  .hero-art{
    position:relative;
    aspect-ratio:1/0.82;
    display:flex; align-items:center; justify-content:center;
  }
  .globe{
    position:absolute; width:78%; aspect-ratio:1/1; border-radius:50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.16), transparent 45%),
      linear-gradient(140deg,#1c3a6b,#0e2447 60%, #091734);
    box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset, 0 40px 80px -30px rgba(0,0,0,0.6);
  }
  .globe::before{
    content:"";
    position:absolute; inset:0; border-radius:50%;
    background-image:
      repeating-linear-gradient(90deg, rgba(227,169,76,0.16) 0 1px, transparent 1px 12%);
    opacity:0.5;
  }
  .plane-icon{position:absolute; top:8%; right:2%; width:34%; color:#eef2f8; filter:drop-shadow(0 18px 24px rgba(0,0,0,0.45));}
  .ship-icon{position:absolute; bottom:2%; left:0; width:78%; color:#dfe6f2; filter:drop-shadow(0 18px 30px rgba(0,0,0,0.5));}

  @media (max-width:960px){
    .hero-inner{grid-template-columns:1fr; text-align:left;}
    .hero-art{aspect-ratio:1/0.7; margin-top:var(--space-5);}
  }

  .hero-stats{
    border-top:1px solid rgba(255,255,255,0.1);
    background:rgba(6,14,30,0.55);
   
  }
  .hero-stats-grid{
    max-width:1240px; margin:0 auto;
    padding:var(--space-5) var(--space-6);
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:var(--space-4);

  }
  .stat-item{
    display:flex; 
    align-items:center; 
    gap:12px; 
    color:#fff;
     z-index: 9999;
}
  .stat-item svg{flex-shrink:0; color:var(--gold-500);}
  .stat-item strong{display:block; font-size:14.5px; font-weight:600;}
  .stat-item span{display:block; font-size:12.5px; color:rgba(255,255,255,0.55);}
  @media (max-width:900px){
    .hero-stats-grid{grid-template-columns:repeat(2,1fr);}
  }



  /* ---------- SECTION GENERIC ---------- */
  section{padding:var(--space-9) 0;}
  .section-head{max-width:560px;}
  .section-head h2{font-size:clamp(26px,3vw,36px); font-weight:800; line-height:1.15;}
  .section-head p{margin-top:var(--space-4); font-size:15.5px;}




  /* ---------- SERVICES ---------- */
  .services{background:var(--paper);}
  .services-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--space-8); align-items:center;
  }
  .service-cards{
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--space-4);
  }
  .service-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:var(--space-5);
    box-shadow:var(--shadow-card);
  }
  .service-card:nth-child(2n){ margin-top:28px; }
  .icon-badge{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
    color:var(--gold-500);
    margin-bottom:var(--space-4);
  }
  .service-card h3{font-size:16px; font-weight:700; margin-bottom:6px;}
  .service-card p{font-size:13.5px;}

  @media (max-width:900px){
    .services-grid{grid-template-columns:1fr;}
    .service-card:nth-child(2n){margin-top:0;}
  }
  @media (max-width:520px){
    .service-cards{grid-template-columns:1fr;}
  }

  /* ---------- FREIGHT (dark) ---------- */
  .freight{
    background:linear-gradient(180deg,var(--navy-950),var(--navy-900));
    color:#fff;
  }
  .freight-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:var(--space-5); flex-wrap:wrap;
    margin-bottom:var(--space-7);
  }
  .freight-head p{color:rgba(255,255,255,0.6); margin-top:var(--space-3); max-width:480px;}
  .freight-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
  }
  .freight-card{
    border-radius:var(--radius-m);
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    transition:transform .2s ease, border-color .2s ease;
  }
  .freight-card:hover{transform:translateY(-4px); border-color:rgba(227,169,76,0.5);}
  .freight-visual{
    aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
    color:var(--gold-500);
  }
.freight-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
  .freight-body{padding:var(--space-4);}
  .freight-body h3{color:#fff; font-size:15.5px; font-weight:700;}
  .freight-body p{color:rgba(255,255,255,0.55); font-size:13px; margin-top:4px;}
  .freight-arrow{
    margin-top:12px; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-500);
  }
  @media (max-width:900px){
    .freight-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .freight-grid{grid-template-columns:1fr;}
  }

  /* ---------- ABOUT ---------- */
  .about{background:var(--cream);}
  .about-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr;
    gap:var(--space-8); align-items:center;
  }
  .about-art{
    position:relative;
    border-radius:var(--radius-l);
    aspect-ratio:1/1.05;
    background:url('img/04_road_freight.jpg');
    overflow:hidden;
  }
  .about-art::before{
    content:"";
    position:absolute; inset:10%;
    border-radius:50%;
    background:
      repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0 1px, transparent 1px 8%);
    border:1px solid rgba(227,169,76,0.35);
  }
  .about-badge{
    position:absolute; left:var(--space-5); bottom:var(--space-5);
    background:#fff; border-radius:var(--radius-m);
    padding:14px 18px;
    display:flex; align-items:center; gap:12px;
    box-shadow:var(--shadow-card);
  }
  .about-badge svg{color:var(--gold-600);}
  .about-badge strong{display:block; font-size:16px; color:var(--navy-950);}
  .about-badge span{font-size:12px; color:var(--ink-faint);}

  .about-copy p{margin-top:var(--space-4); font-size:15.5px; max-width:520px;}
  .about-stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);
    margin:var(--space-6) 0;
  }
  .about-stat strong{display:block; font-size:24px; font-weight:800; color:var(--navy-950);}
  .about-stat span{font-size:12.5px; color:var(--ink-faint);}

  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr;}
    .about-stats{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- PROCESS ---------- */
  .process{
    position:relative;
    color:#fff;
    background:url('img/07_mountain_road_truck.jpg') no-repeat center center/cover;
    overflow:hidden;
  }
  .process::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.60) 40%,
        rgba(0, 0, 0, 0.30) 65%,
        rgba(0, 0, 0, 0.05) 85%,
        rgba(0, 0, 0, 0) 100%
    );
  }
  .process-inner{position:relative; z-index:2;}
  .process-head p{color:rgba(255,255,255,0.65); margin-top:var(--space-3); max-width:480px;}
  .steps{
    margin-top:var(--space-8);
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:var(--space-5);
    position:relative;
  }
  .steps::before{
    content:"";
    position:absolute; top:22px; left:6%; right:6%; height:1px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 8px, transparent 8px 16px);
  }
  .step{position:relative;}
  .step-num{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(180deg,var(--gold-500),var(--gold-600));
    color:var(--navy-950);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:16px;
    box-shadow:0 10px 22px -8px rgba(227,169,76,0.6);
    margin-bottom:var(--space-4);
    position:relative; z-index:2;
  }
  .step h3{color:#fff; font-size:16px; font-weight:700;}
  .step p{color:rgba(255,255,255,0.6); font-size:13.5px; margin-top:6px;}

  @media (max-width:900px){
    .steps{grid-template-columns:repeat(2,1fr); row-gap:var(--space-6);}
    .steps::before{display:none;}
  }
  @media (max-width:520px){
    .steps{grid-template-columns:1fr;}
  }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{background:var(--paper);}
  .t-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);
    margin-top:var(--space-7);
  }
  .t-card{
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:var(--space-5);
    background:var(--paper);
  }
  .t-quote{font-size:14.5px; color:var(--ink-soft); line-height:1.7;}
  .t-person{display:flex; align-items:center; gap:12px; margin-top:var(--space-5);}
  .t-avatar{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-500); font-weight:700; font-size:15px;
  }
  .t-person strong{display:block; font-size:14px; color:var(--navy-950);}
  .t-person span{display:block; font-size:12px; color:var(--ink-faint);}
  .t-stars{margin-top:6px; color:var(--gold-600); font-size:13px; letter-spacing:2px;}

  @media (max-width:900px){
    .t-grid{grid-template-columns:1fr;}
  }

  /* ---------- AWARDS ---------- */
  .awards{
    background:var(--navy-950);
    color:#fff;
  }
  .awards-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--space-7); align-items:center;
  }
  .awards-copy p{color:rgba(255,255,255,0.6); margin-top:var(--space-3); max-width:420px;}
  .badges{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);}
  .badge{
    border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius-m);
    padding:var(--space-4) var(--space-3);
    text-align:center;
    background:rgba(255,255,255,0.02);
  }
  .badge svg{color:var(--gold-500); margin:0 auto 10px;}
  .badge strong{display:block; font-size:12.5px; color:#fff; font-weight:600;}
  .badge span{display:block; font-size:11px; color:rgba(255,255,255,0.5); margin-top:2px;}

  @media (max-width:900px){
    .awards-grid{grid-template-columns:1fr;}
    .badges{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- CONTACT / CTA ---------- */
  .contact{
    color:#040404;
  }
  .contact-grid{
    display:grid; grid-template-columns:1fr 0.85fr;
    gap:var(--space-8); align-items:center;
  }
  .contact-copy p{color:rgba(255,255,255,0.65); margin-top:var(--space-3); max-width:420px;}
  .contact-list{margin-top:var(--space-6); display:flex; flex-direction:column; gap:16px;}
  .contact-list li{display:flex; align-items:center; gap:14px; font-size:14.5px; color:rgba(255,255,255,0.85);}
  .contact-list svg{color:var(--gold-500); flex-shrink:0;}

  .form-card{
    background:#fff; border-radius:var(--radius-l);
    padding:var(--space-6);
    box-shadow:0 40px 80px -30px rgba(0,0,0,0.5);
  }
  .form-card h3{font-size:19px; font-weight:800; color:var(--navy-950); margin-bottom:var(--space-4);}
  .field{margin-bottom:var(--space-4);}
  .field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; border:1px solid var(--line); border-radius:var(--radius-s);
    padding:12px 14px; font-size:14px; font-family:inherit; color:var(--ink);
    background:#fbfaf7;
  }
  .field textarea{resize:vertical; min-height:70px;}
  .form-card .btn{width:100%; justify-content:center; margin-top:var(--space-2);}

  @media (max-width:900px){
    .contact-grid{grid-template-columns:1fr;}
  }

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-950); color:rgba(255,255,255,0.6); padding:var(--space-7) 0 var(--space-5);}
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:var(--space-6);
    padding-bottom:var(--space-6);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-links{display:flex; gap:34px; flex-wrap:wrap;}
  .footer-links a{font-size:13.5px; color:rgba(255,255,255,0.6);}
  .footer-links a:hover{color:#fff;}
  .socials{display:flex; gap:12px;}
  .socials a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
  }
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding-top:var(--space-5); font-size:12.5px;
  }
  .footer-bottom a{color:rgba(255,255,255,0.5); margin-left:18px;}

  ::selection{background:var(--gold-100); color:var(--navy-950);}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

  :focus-visible{outline:2px solid var(--gold-500); outline-offset:2px;}





  /*=======About Us=======*/

  /* ---------- FREIGHT (dark) ---------- */
  .freight{
    background:linear-gradient(180deg,var(--navy-950),var(--navy-900));
    color:#fff;
  }
  .freight-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:var(--space-5); flex-wrap:wrap;
    margin-bottom:var(--space-7);
  }
  .freight-head p{color:rgba(255,255,255,0.6); margin-top:var(--space-3); max-width:480px;}
  .freight-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
  }
  .freight-card{
    border-radius:var(--radius-m);
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    transition:transform .2s ease, border-color .2s ease;
  }
  .freight-card:hover{transform:translateY(-4px); border-color:rgba(227,169,76,0.5);}
  .freight-visual{
    aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
    color:var(--gold-500);
  }
  .freight-visual svg{width:46%; height:46%;}
  .freight-body{padding:var(--space-4);}
  .freight-body h3{color:#fff; font-size:15.5px; font-weight:700;}
  .freight-body p{color:rgba(255,255,255,0.55); font-size:13px; margin-top:4px;}
  .freight-arrow{
    margin-top:12px; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-500);
  }
  @media (max-width:900px){
    .freight-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .freight-grid{grid-template-columns:1fr;}
  }

  
  /* ---------- TESTIMONIALS ---------- */
  .testimonials{background:var(--paper);}
  .t-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);
    margin-top:var(--space-7);
  }
  .t-card{
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:var(--space-5);
    background:var(--paper);
  }
  .t-quote{font-size:14.5px; color:var(--ink-soft); line-height:1.7;}
  .t-person{display:flex; align-items:center; gap:12px; margin-top:var(--space-5);}
  .t-avatar{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-500); font-weight:700; font-size:15px;
  }
  .t-person strong{display:block; font-size:14px; color:var(--navy-950);}
  .t-person span{display:block; font-size:12px; color:var(--ink-faint);}
  .t-stars{margin-top:6px; color:var(--gold-600); font-size:13px; letter-spacing:2px;}

  @media (max-width:900px){
    .t-grid{grid-template-columns:1fr;}
  }

  /* ---------- AWARDS ---------- */
  .awards{
    background:var(--navy-950);
    color:#fff;
  }
  .awards-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--space-7); align-items:center;
  }
  .awards-copy p{color:rgba(255,255,255,0.6); margin-top:var(--space-3); max-width:420px;}
  .badges{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);}
  .badge{
    border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius-m);
    padding:var(--space-4) var(--space-3);
    text-align:center;
    background:rgba(255,255,255,0.02);
  }
  .badge svg{color:var(--gold-500); margin:0 auto 10px;}
  .badge strong{display:block; font-size:12.5px; color:#fff; font-weight:600;}
  .badge span{display:block; font-size:11px; color:rgba(255,255,255,0.5); margin-top:2px;}

  @media (max-width:900px){
    .awards-grid{grid-template-columns:1fr;}
    .badges{grid-template-columns:repeat(2,1fr);}
  }

  

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-950); color:rgba(255,255,255,0.6); padding:var(--space-7) 0 var(--space-5);}
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:var(--space-6);
    padding-bottom:var(--space-6);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-links{display:flex; gap:34px; flex-wrap:wrap;}
  .footer-links a{font-size:13.5px; color:rgba(255,255,255,0.6);}
  .footer-links a:hover{color:#fff;}
  .socials{display:flex; gap:12px;}
  .socials a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
  }
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding-top:var(--space-5); font-size:12.5px;
  }
  .footer-bottom a{color:rgba(255,255,255,0.5); margin-left:18px;}

  ::selection{background:var(--gold-100); color:var(--navy-950);}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

  :focus-visible{outline:2px solid var(--gold-500); outline-offset:2px;}

  /* ---------- PAGE HERO (sub-pages) ---------- */
  .page-hero{
    position:relative;
    background:
      radial-gradient(ellipse 800px 420px at 82% 15%, rgba(227,169,76,0.2), transparent 60%),
      linear-gradient(160deg,var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
    color:#fff;
    padding:var(--space-8) 0 var(--space-7);
    overflow:hidden;
  }
  .page-hero .hero-glow{right:-220px; top:-200px;}
  .breadcrumb{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:rgba(255,255,255,0.55);
    margin-bottom:var(--space-4);
  }
  .breadcrumb a{color:rgba(255,255,255,0.75);}
  .breadcrumb a:hover{color:var(--gold-500);}
  .page-hero h1{
    font-size:clamp(32px,4.4vw,48px);
    font-weight:800;
    color:#fff;
    max-width:680px;
    line-height:1.1;
  }
  .page-hero p.lead{
    margin-top:var(--space-4);
    font-size:16px;
    color:rgba(255,255,255,0.68);
    max-width:560px;
  }
  .page-hero-inner{position:relative; z-index:2;}

  /* ---------- VALUES / FEATURE GRID ---------- */
  .values-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
    margin-top:var(--space-7);
  }
  .value-card{
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:var(--space-5);
    background:var(--paper);
    box-shadow:var(--shadow-card);
    text-align:left;
  }
  .value-card h3{font-size:16px; font-weight:700; margin-bottom:8px;}
  .value-card p{font-size:13.5px;}
  @media (max-width:900px){ .values-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .values-grid{grid-template-columns:1fr;} }

  /* ---------- TIMELINE (about) ---------- */
  .timeline{
    margin-top:var(--space-7);
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
    position:relative;
  }
  .timeline::before{
    content:"";
    position:absolute; top:22px; left:6%; right:6%; height:1px;
    background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  }
  .tl-item{position:relative;}
  .tl-dot{
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(180deg,var(--navy-800),var(--navy-950));
    color:var(--gold-500);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:13px;
    margin-bottom:var(--space-4);
    position:relative; z-index:2;
    box-shadow:0 10px 22px -10px rgba(10,23,48,0.5);
  }
  .tl-item h3{font-size:15px; font-weight:700; margin-bottom:6px;}
  .tl-item p{font-size:13px;}
  @media (max-width:900px){ .timeline{grid-template-columns:repeat(2,1fr); row-gap:var(--space-6);} .timeline::before{display:none;} }
  @media (max-width:520px){ .timeline{grid-template-columns:1fr;} }

  /* ---------- FULL SERVICES GRID ---------- */
  .full-services-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
    margin-top:var(--space-7);
  }
  @media (max-width:900px){ .full-services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .full-services-grid{grid-template-columns:1fr;} }

  /* ---------- FAQ ---------- */
  .faq{max-width:760px; margin:var(--space-7) auto 0;}
  .faq-item{
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:var(--space-4) var(--space-5);
    margin-bottom:var(--space-3);
    background:var(--paper);
  }
  .faq-item summary{
    cursor:pointer;
    font-weight:700; font-size:15px; color:var(--navy-950);
    list-style:none;
    display:flex; align-items:center; justify-content:space-between;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";
    font-size:20px; color:var(--gold-600); font-weight:400;
    transition:transform .2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{margin-top:var(--space-3); font-size:14px;}

  /* ---------- MAP CARD (contact) ---------- */
  .map-card{
    position:relative;
    border-radius:var(--radius-l);
    aspect-ratio:16/8;
    background:
      radial-gradient(circle at 30% 30%, rgba(227,169,76,0.22), transparent 55%),
      linear-gradient(150deg,#0e2447,#091734 70%);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    margin-top:var(--space-7);
  }
  .map-card::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px);
  }
  .map-pin{
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff;
  }
  .map-pin svg{color:var(--gold-500);}
  .map-pin strong{font-size:15px;}
  .map-pin span{font-size:12.5px; color:rgba(255,255,255,0.6);}

  .nav-links a.active-link{color:#fff; position:relative;}
  .nav-links a.active-link::after{
    content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
    background:var(--gold-500); border-radius:2px;
  }

  /* ---------- CTA BAND ---------- */
  .cta-band{
    background:linear-gradient(120deg,#0a1730,#173463 60%, #2b4f88 120%);
    color:#fff;
    border-radius:var(--radius-l);
    padding:var(--space-7) var(--space-6);
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-6); flex-wrap:wrap;
  }
  .cta-band h2{color:#fff; font-size:26px;}
  .cta-band p{color:rgba(255,255,255,0.65); margin-top:8px; max-width:420px;}




  /*======Alert Box =========*/
  .custom-alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 16px 18px;
    margin: 20px 0;
    border-radius: 14px;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    animation: alertSlideIn .4s ease;
    font-family: inherit;
}

/* Success */
.custom-alert-success {
    background: linear-gradient(
        135deg,
        #fff5f0,
        #ffffff
    );
    border-color: #ebcab8;
    color: #f35b5b;
}

.alert-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #a71616;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(22, 167, 101, .25);
}

.alert-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.alert-content strong {
    font-size: 15px;
    font-weight: 700;
}

.alert-content span {
    font-size: 14px;
    color: #725d55;
    line-height: 1.5;
}

.alert-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #7b9388;
    border-radius: 50%;
    cursor: pointer;
    transition: all .25s ease;
}

.alert-close:hover {
    background: rgba(0, 0, 0, .06);
    color: #222;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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