/*
Theme Name: Viam Cargo & Logistics
Theme URI: https://example.com
Author: Viam Cargo & Logistics
Description: Custom front-end theme for the Viam Cargo & Logistics website.
Version: 1.0
Text Domain: viam-cargo-logistics
*/


  :root{
    --bg:#FAFAFA;
    --ink:#0F1F3D;
    --ink-soft:#5C6478;
    --line:#E1E4EA;
    --accent:#2C5FCE;
    --accent-soft:#E7EEFD;
    --card:#FFFFFF;
    --black:#0B0E14;
    --black-soft:#AEB4C2;
    --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12141A; --ink:#F1F2F4; --ink-soft:#A7ACB8; --line:#2A2E38; --card:#191C24; --accent-soft:#1C2A4A;
    }
  }
  :root[data-theme="dark"]{
    --bg:#12141A; --ink:#F1F2F4; --ink-soft:#A7ACB8; --line:#2A2E38; --card:#191C24; --accent-soft:#1C2A4A;
  }
  *{box-sizing:border-box;}
  html{scroll-padding-top: calc(72px + env(safe-area-inset-top,0px));}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter', var(--font-fallback);
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.stat-num{font-family:'Archivo', var(--font-fallback);}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 28px;}

  header{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding-top:env(safe-area-inset-top,0px);
  }
  nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:1160px; margin:0 auto; gap:20px;}
  .brand{display:flex; align-items:center; gap:10px; flex:none;}
  .brand img{height:30px; width:auto;}
  .brand-text{display:flex; flex-direction:column; line-height:1.1;}
  .brand-name{font-size:16.5px; font-weight:800; letter-spacing:-0.01em; white-space:nowrap;}
  .brand-tag{font-size:10px; letter-spacing:0.06em; color:var(--ink-soft); font-weight:600;}
  @media (max-width:480px){ .brand-tag{display:none;} }
  .navlinks{display:flex; gap:24px; font-size:14.5px; font-weight:500; flex:1; justify-content:center;}
  .navlinks a{text-decoration:none; color:var(--ink-soft); transition:color .15s; white-space:nowrap;}
  .navlinks a:hover{color:var(--ink);}
  .nav-actions{display:flex; align-items:center; gap:10px; flex:none;}
  .btn{padding:11px 20px; border-radius:3px; font-weight:600; font-size:14px; text-decoration:none; display:inline-block; border:1px solid transparent; cursor:pointer;}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:#2450AD;}
  .btn-ghost{border-color:var(--line); color:var(--ink); background:none;}
  .btn-ghost:hover{border-color:var(--ink);}
  @media (max-width:900px){ .navlinks{display:none;} }

  .hero{
    padding:76px 0 84px; position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 85% -10%, #1E4FC4 0%, transparent 60%),
      linear-gradient(155deg, #0B1730 0%, #0F1F3D 45%, #14295A 100%);
    color:#fff;
  }
  .hero-bg{position:absolute; inset:0; pointer-events:none; opacity:0.5;}
  .hero-grid{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .hero-inner{position:relative; max-width:640px;}
  .hero-search{background:#fff; border-radius:10px; padding:8px; display:flex; gap:8px; box-shadow:0 24px 60px -20px rgba(6,12,30,0.6); margin-top:6px;}
  .hero-search input{flex:1; border:none; padding:14px 16px; font-size:15px; border-radius:6px; background:transparent; color:var(--ink); font-family:inherit;}
  .hero-search input:focus{outline:none;}
  .hero-search button{background:var(--ink); color:#fff; border:none; padding:0 24px; border-radius:6px; font-weight:700; font-size:14.5px; cursor:pointer;}
  .hero-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:5; margin-top:-64px; margin-bottom:24px;}
  @media (max-width:820px){ .hero-cards{grid-template-columns:1fr; margin-top:20px;} }
  .hero-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px; box-shadow:0 20px 44px -20px rgba(6,12,30,0.28);}
  .hero-card-icon{width:32px; height:32px; margin-bottom:14px;}
  .hero-card h4{font-size:15.5px; font-weight:700; margin:0 0 5px;}
  .hero-card p{font-size:13px; color:var(--ink-soft); margin:0 0 10px; line-height:1.5;}
  .hero-card a{font-size:13px; font-weight:700; color:var(--accent); text-decoration:none;}
  .eyebrow{font-size:13.5px; color:var(--accent); font-weight:600; margin-bottom:14px; letter-spacing:0.02em;}
  .hero .eyebrow{color:#8FB3FF;}
  h1{font-size:clamp(32px,4.6vw,50px); line-height:1.08; font-weight:800; letter-spacing:-0.02em; margin:0 0 20px;}
  .hero h1{color:#fff;}
  .lede{font-size:17.5px; line-height:1.6; color:var(--ink-soft); max-width:48ch; margin:0 0 28px;}
  .hero .lede{color:#B7C4E0;}
  .cta-row{display:flex; gap:12px; flex-wrap:wrap;}
  .hero .btn-ghost{border-color:rgba(255,255,255,0.35); color:#fff;}
  .hero .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}

  .track-box{border:1px solid var(--line); border-radius:8px; background:var(--card); padding:26px; box-shadow:0 24px 60px -20px rgba(6,12,30,0.55);}
  .track-title{font-size:14px; font-weight:700; margin-bottom:4px;}
  .track-sub{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
  .track-row{display:flex; gap:10px; margin-bottom:22px;}
  .track-input{flex:1; border:1px solid var(--line); border-radius:4px; padding:11px 14px; font-size:14px; background:var(--bg); color:var(--ink); font-family:inherit;}
  .track-input:focus{outline:2px solid var(--accent); outline-offset:1px;}
  .track-btn{background:var(--ink); color:var(--bg); border:none; border-radius:4px; padding:0 18px; font-weight:600; font-size:14px; cursor:pointer;}
  .route-line{position:relative; padding-left:24px;}
  .route-line::before{content:""; position:absolute; left:5px; top:5px; bottom:5px; width:2px; background:var(--line);}
  .route-stop{position:relative; padding-bottom:20px;}
  .route-stop:last-child{padding-bottom:0;}
  .route-stop::before{content:""; position:absolute; left:-24px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--accent);}
  .route-stop.active::before{background:var(--accent);}
  .route-stop-city{font-weight:600; font-size:14px;}
  .route-stop-meta{font-size:12.5px; color:var(--ink-soft); margin-top:1px;}

  .stats{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); padding:30px 0;}
  @media (max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr); gap:22px 0;} }
  .stat{padding:0 20px; border-left:1px solid var(--line);}
  .stat:first-child{border-left:none;}
  @media (max-width:700px){ .stat:nth-child(odd){border-left:none;} .stat{border-left:1px solid var(--line);} }
  .stat-num{font-size:28px; font-weight:800; letter-spacing:-0.01em;}
  .stat-label{font-size:13px; color:var(--ink-soft); margin-top:3px;}

  section{padding:68px 0;}
  .section-head{max-width:640px; margin-bottom:40px;}
  .section-head .eyebrow{margin-bottom:10px;}
  .section-head h2{font-size:clamp(25px,3.2vw,34px); font-weight:800; letter-spacing:-0.015em; margin:0 0 12px;}
  .section-head p{font-size:16px; color:var(--ink-soft); line-height:1.6; margin:0;}

  .about-row{max-width:760px;}
  .about-copy p{font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 16px;}
  .about-copy strong{color:var(--ink);}
  .office-list{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
  .office-chip{font-size:13px; padding:7px 13px; border-radius:20px; border:1px solid var(--line); color:var(--ink);}

  .brands-section{background:linear-gradient(180deg, var(--accent-soft), var(--bg)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0;}
  .brands-title{text-align:center; font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:0.04em; margin-bottom:20px;}
  .brands-rail{overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);}
  .brands-row{display:flex; gap:16px; width:max-content; animation:roll-x 22s linear infinite;}
  @keyframes roll-x{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .brands-row{animation:none;} }
  .brand-chip{border:1px solid var(--line); background:#fff; border-radius:8px; padding:18px 28px; font-size:13.5px; font-weight:700; color:var(--accent); text-align:center; white-space:nowrap; cursor:pointer; transition:box-shadow .15s, transform .15s;}
  .brand-chip:hover{box-shadow:0 10px 24px -10px rgba(44,95,206,0.35); transform:translateY(-2px);}

  .vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media (max-width:760px){ .vm-grid{grid-template-columns:1fr;} }
  .vm-card{border:1px solid var(--line); border-radius:8px; background:var(--card); padding:32px 30px;}
  .vm-label{font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:0.02em; margin-bottom:12px;}
  .vm-card h3{font-size:20px; font-weight:700; margin:0 0 12px;}
  .vm-card p{font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0;}

  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }
  .service{background:var(--card); padding:28px 24px;}
  .service-num{font-size:12.5px; color:var(--accent); font-weight:600; margin-bottom:14px;}
  .service h3{font-size:17.5px; font-weight:700; margin:0 0 8px;}
  .service p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0;}

  .tag-row{display:flex; flex-wrap:wrap; gap:10px;}
  .tag{font-size:13.5px; padding:9px 16px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft); background:var(--card);}

  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:800px){ .why-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
  .why-card h4{font-size:16px; font-weight:700; margin:0 0 6px;}
  .why-card p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0;}

  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media (max-width:860px){ .testi-grid{grid-template-columns:1fr;} }
  .testi-card{border:1px solid var(--line); border-radius:8px; background:var(--card); padding:26px; display:flex; flex-direction:column; gap:16px;}
  .testi-quote{font-size:14.5px; line-height:1.6; color:var(--ink); font-style:italic;}
  .testi-name{font-size:13.5px; font-weight:700; display:inline-block; padding:3px 8px; margin:-3px 0 0 -8px; border-radius:4px; cursor:pointer; transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent;}
  .testi-name:hover, .testi-name.is-active{background:var(--accent); color:#fff;}
  .testi-role{font-size:12.5px; color:var(--ink-soft);}
  .testi-placeholder{font-size:12px; color:var(--accent); border-top:1px dashed var(--line); padding-top:12px; margin-top:auto;}

  .contact{background:var(--black); color:#fff;}
  .contact .section-head h2{color:#fff;}
  .contact .section-head p{color:var(--black-soft);}
  .contact .eyebrow{color:#7FA3F0;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; margin-bottom:36px;}
  @media (max-width:800px){ .contact-grid{grid-template-columns:1fr;} }
  .office-card{border:1px solid #262C3B; border-radius:8px; padding:24px;}
  .office-card h4{font-size:15.5px; font-weight:700; margin:0 0 10px;}
  .office-card p{font-size:13.5px; line-height:1.7; color:var(--black-soft); margin:0;}
  .contact-cta{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; border-top:1px solid #262C3B; padding-top:30px;}
  .contact-cta p{margin:0; font-size:14.5px; color:var(--black-soft);}
  .contact .btn-primary{background:var(--accent);}
  .contact .btn-ghost{border-color:#3A4152; color:#fff;}

  footer{background:var(--black); border-top:1px solid #1D2230; padding:40px 0 48px;}
  .foot-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;}
  @media (max-width:860px){ .foot-top{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .foot-top{grid-template-columns:1fr;} }
  .foot-brand-block img{height:32px; margin-bottom:10px;}
  .foot-brand-name{color:#fff; font-size:16px; font-weight:800; margin-bottom:6px;}
  .foot-tagline{font-size:13.5px; color:var(--black-soft); font-weight:600; margin-bottom:16px;}
  .foot-social{display:flex; gap:10px;}
  .foot-social a{width:30px; height:30px; border-radius:6px; background:#1B2130; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-size:13px; font-weight:700;}
  .foot-col-title{color:#fff; font-size:13px; font-weight:700; margin-bottom:14px;}
  .foot-col a{display:block; font-size:13.5px; color:var(--black-soft); text-decoration:none; margin-bottom:10px;}
  .foot-col a:hover{color:#fff;}
  .foot-bottom{border-top:1px solid #1D2230; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  .foot-copy{font-size:12.5px; color:#5C6478;}

  /* LOGIN DROPDOWN */
  .login-wrap{position:relative;}
  .login-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 44px -18px rgba(6,12,30,0.35); min-width:180px; padding:6px; display:none; z-index:30;}
  .login-menu.open{display:block;}
  .login-menu button{display:block; width:100%; text-align:left; background:none; border:none; padding:10px 12px; font-size:14px; font-weight:600; color:var(--ink); border-radius:5px; cursor:pointer; font-family:inherit;}
  .login-menu button:hover{background:var(--accent-soft); color:var(--accent);}

  /* MODAL SYSTEM */
  .modal-overlay{position:fixed; inset:0; background:rgba(8,12,24,0.6); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal-overlay.open{display:flex;}
  .modal-box{background:var(--card); border-radius:10px; max-width:440px; width:100%; max-height:86vh; overflow-y:auto; padding:28px; position:relative; box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);}
  .modal-close{position:absolute; top:14px; right:14px; background:none; border:none; font-size:20px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:4px;}
  .modal-title{font-size:19px; font-weight:800; margin:0 0 6px; padding-right:20px;}
  .modal-sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 20px;}
  .form-row{margin-bottom:14px;}
  .form-row label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
  .form-row input, .form-row select, .form-row textarea{width:100%; border:1px solid var(--line); border-radius:5px; padding:10px 12px; font-size:14px; font-family:inherit; background:var(--bg); color:var(--ink);}
  .form-row textarea{resize:vertical; min-height:70px;}
  .modal-submit{width:100%; background:var(--accent); color:#fff; border:none; border-radius:5px; padding:12px; font-weight:700; font-size:14.5px; cursor:pointer; margin-top:4px;}
  .modal-note{font-size:12px; color:var(--ink-soft); margin-top:12px; text-align:center;}
  .modal-policy{font-size:13.5px; line-height:1.7; color:var(--ink-soft);}
  .modal-policy h4{font-size:14px; color:var(--ink); margin:16px 0 6px;}
  .modal-policy h4:first-child{margin-top:0;}
  .brand-modal-name{font-size:15px; font-weight:700; margin-bottom:4px;}