/*
Theme Name: ABM Logistics
Theme URI: https://www.abm-logistics.com
Author: ABM Logistics & Transport
Author URI: https://www.abm-logistics.com
Description: A distinctive one-page WordPress theme for ABM Logistics & Transport — a nationwide freight, cargo, and transportation company in Bangladesh. Includes hero, services, fleet, process, industries, coverage, payment/billing, and a quote request section.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abm-logistics
*/

  :root{
    --ink:#0F1B2D;
    --asphalt:#1D2A3F;
    --amber:#F0A63A;
    --amber-dim:#C9832A;
    --paper:#F7F5F0;
    --paper-dim:#EFEBE1;
    --slate:#57616F;
    --white:#FFFFFF;
    --line: rgba(15,27,45,0.12);
    --line-light: rgba(247,245,240,0.16);
    --radius: 3px;
    --maxw: 1200px;
    --display: 'Oswald', 'Arial Narrow', sans-serif;
    --body: 'Inter', -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', 'Courier New', monospace;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }

  h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:0.01em; line-height:1.1; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--amber-dim);
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px; background:var(--amber);
    display:inline-block;
  }
  section{ padding:88px 0; }
  @media (max-width:720px){ section{ padding:56px 0; } }

  .section-head{ max-width:640px; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
  .section-head p{ color:var(--slate); font-size:16px; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    padding:14px 26px;
    border-radius:var(--radius);
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--amber); color:var(--ink); font-weight:600; }
  .btn-primary:hover{ background:#ffb84f; }
  .btn-outline{ border-color:rgba(255,255,255,0.35); color:var(--paper); }
  .btn-outline:hover{ border-color:var(--amber); color:var(--amber); }
  .btn-dark-outline{ border-color:var(--ink); color:var(--ink); }
  .btn-dark-outline:hover{ background:var(--ink); color:var(--paper); }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(15,27,45,0.96);
    backdrop-filter: blur(6px);
    border-bottom:1px solid var(--line-light);
  }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
  .logo{ display:flex; align-items:center; gap:10px; color:var(--paper); flex-shrink:0; }
  .logo .mark{
    width:34px; height:34px; background:var(--amber); border-radius:2px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-weight:700; color:var(--ink); font-size:16px;
  }
  .logo .name{ font-family:var(--display); font-size:17px; letter-spacing:0.02em; text-transform:uppercase; }
  .logo .name span{ color:var(--amber); }

  nav.primary{ display:flex; align-items:center; gap:28px; }
  nav.primary a{
    font-family:var(--mono); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:rgba(247,245,240,0.75);
    transition:color .15s ease;
  }
  nav.primary a:hover{ color:var(--amber); }

  .nav-right{ display:flex; align-items:center; gap:18px; }
  .nav-phone{ display:flex; flex-direction:column; text-align:right; color:var(--paper); }
  .nav-phone small{ font-family:var(--mono); font-size:10.5px; color:var(--slate); text-transform:uppercase; letter-spacing:0.08em; }
  .nav-phone strong{ font-family:var(--mono); font-size:14px; }

  .menu-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:24px; cursor:pointer; }

  @media (max-width:980px){
    nav.primary{
      position:absolute; top:76px; left:0; right:0;
      background:var(--ink);
      flex-direction:column; align-items:flex-start;
      padding:20px 28px; gap:18px;
      border-bottom:1px solid var(--line-light);
      display:none;
    }
    nav.primary.open{ display:flex; }
    .menu-toggle{ display:block; }
    .nav-phone{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(ellipse at 80% -10%, rgba(240,166,58,0.16), transparent 55%),
      linear-gradient(180deg, var(--ink) 0%, var(--asphalt) 100%);
    color:var(--paper);
    padding:110px 0 0 0;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; padding-bottom:64px; }
  @media (max-width:980px){ .hero .wrap{ grid-template-columns:1fr; } }

  .hero-tag{
    font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--amber); margin-bottom:22px; display:flex; align-items:center; gap:10px;
  }
  .hero-tag::before{ content:""; width:8px; height:8px; background:var(--amber); border-radius:50%; }

  .hero h1{
    font-size:clamp(34px, 5.4vw, 58px);
    color:var(--white);
    margin-bottom:22px;
  }
  .hero h1 em{ font-style:normal; color:var(--amber); }
  .hero p.lead{ font-size:17px; color:rgba(247,245,240,0.78); max-width:520px; margin-bottom:34px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

  .hero-manifest{
    background:var(--paper);
    color:var(--ink);
    border-radius:4px;
    padding:26px 26px 22px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
    font-family:var(--mono);
    transform:rotate(1.2deg);
  }
  .hero-manifest .m-head{
    display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:2px dashed var(--line); padding-bottom:12px; margin-bottom:14px;
  }
  .hero-manifest .m-head b{ font-family:var(--display); font-size:14px; letter-spacing:0.06em; text-transform:uppercase; }
  .hero-manifest .m-head span{ font-size:11px; color:var(--slate); }
  .m-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--line); }
  .m-row span:first-child{ color:var(--slate); }
  .m-row span:last-child{ font-weight:600; }
  .m-row:last-of-type{ border-bottom:none; }
  .m-stamp{
    margin-top:16px; display:inline-flex; align-items:center; gap:8px;
    font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--amber-dim); border:1.5px solid var(--amber-dim); border-radius:2px;
    padding:6px 10px;
  }

  /* route strip inside hero */
  .route-strip-wrap{ border-top:1px solid var(--line-light); padding:26px 0; }
  .route-strip{
    display:flex; align-items:center; overflow-x:auto; gap:0;
    font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
    color:rgba(247,245,240,0.55);
  }
  .route-strip .stop{ white-space:nowrap; padding:6px 0; display:flex; align-items:center; gap:14px; }
  .route-strip .stop.active{ color:var(--amber); }
  .route-strip .arrow{ color:var(--amber-dim); padding:0 14px; }

  /* ---------- STATS ---------- */
  .stats-bar{ background:var(--asphalt); color:var(--paper); }
  .stats-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  }
  @media (max-width:980px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
  .stat-item{
    padding:34px 22px; border-right:1px solid var(--line-light);
  }
  .stats-grid .stat-item:last-child{ border-right:none; }
  @media (max-width:980px){ .stat-item:nth-child(2n){ border-right:none; } }
  .stat-item h3{ font-size:15px; text-transform:uppercase; letter-spacing:0.03em; color:var(--amber); margin-bottom:6px; }
  .stat-item p{ font-size:13px; color:rgba(247,245,240,0.65); }

  /* ---------- ABOUT ---------- */
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:20px; }
  @media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
  .mv-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 28px;
  }
  .mv-card .eyebrow{ margin-bottom:10px; }
  .mv-card h3{ font-size:20px; margin-bottom:10px; }
  .mv-card p{ color:var(--slate); font-size:15px; }
  .about-lead{ font-size:17px; color:var(--slate); max-width:760px; margin-bottom:40px; }

  /* ---------- ICON ---------- */
  .icon{ width:40px; height:40px; }
  .icon path, .icon rect, .icon circle, .icon polyline, .icon line{ stroke:var(--amber-dim); }

  /* ---------- CARD GRID (services) ---------- */
  .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }
  .svc-card{
    background:var(--white); padding:32px 26px; transition:background .15s ease;
  }
  .svc-card:hover{ background:var(--paper-dim); }
  .svc-card .num{ font-family:var(--mono); font-size:12px; color:var(--amber-dim); margin-bottom:18px; display:block; }
  .svc-card h3{ font-size:18px; margin-bottom:10px; }
  .svc-card p{ font-size:14px; color:var(--slate); }

  /* ---------- DARK SECTION ---------- */
  .dark{ background:var(--ink); color:var(--paper); }
  .dark .section-head p{ color:rgba(247,245,240,0.6); }
  .dark .eyebrow{ color:var(--amber); }

  /* ---------- FLEET ---------- */
  .fleet-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:10px; }
  @media (max-width:980px){ .fleet-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:600px){ .fleet-grid{ grid-template-columns:repeat(2,1fr); } }
  .fleet-card{
    border:1px solid var(--line-light); border-radius:var(--radius);
    padding:22px 18px; text-align:left;
  }
  .fleet-card .icon path, .fleet-card .icon rect, .fleet-card .icon circle, .fleet-card .icon polyline, .fleet-card .icon line{ stroke:var(--amber); }
  .fleet-card h4{ font-size:14px; text-transform:uppercase; letter-spacing:0.03em; margin:14px 0 6px; }
  .fleet-card p{ font-size:12.5px; color:rgba(247,245,240,0.55); }

  .factors-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
  .factor-chip{
    font-family:var(--mono); font-size:12px; letter-spacing:0.03em; text-transform:uppercase;
    border:1px solid var(--line-light); color:rgba(247,245,240,0.75);
    padding:9px 14px; border-radius:20px;
  }

  /* ---------- PROCESS / ROUTE STEPPER ---------- */
  .process-track{ position:relative; margin-top:50px; }
  .process-line{
    position:absolute; top:19px; left:0; right:0; height:2px;
    background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
  }
  .process-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:18px; position:relative; }
  @media (max-width:980px){ .process-grid{ grid-template-columns:repeat(4,1fr); } }
  @media (max-width:600px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
  .process-step .dot{
    width:38px; height:38px; border-radius:50%; background:var(--white); border:2px solid var(--amber);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink);
    margin-bottom:16px; position:relative; z-index:2;
  }
  .process-step h4{ font-size:14px; margin-bottom:6px; }
  .process-step p{ font-size:12.5px; color:var(--slate); }

  /* ---------- FLOW DIAGRAM (port & customs) ---------- */
  .flow-diagram{
    display:flex; align-items:center; flex-wrap:wrap; gap:0;
    background:var(--asphalt); border-radius:var(--radius); padding:30px 26px; margin:36px 0 44px;
  }
  .flow-node{
    font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--paper); border:1px solid var(--amber); border-radius:2px; padding:10px 16px;
  }
  .flow-arrow{ color:var(--amber); padding:0 12px; font-size:16px; }

  .tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag-list .factor-chip{ border-color:var(--line); color:var(--slate); }

  /* ---------- INDUSTRIES ---------- */
  .industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px; }
  @media (max-width:900px){ .industry-grid{ grid-template-columns:repeat(2,1fr); } }
  .industry-card{ background:var(--white); padding:26px 22px; }
  .industry-card h4{ font-size:14.5px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:8px; }
  .industry-card p{ font-size:13px; color:var(--slate); }

  /* ---------- COVERAGE ---------- */
  .coverage-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:10px; }
  @media (max-width:900px){ .coverage-wrap{ grid-template-columns:1fr; } }
  .city-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  @media (max-width:520px){ .city-grid{ grid-template-columns:repeat(2,1fr); } }
  .city-chip{
    font-family:var(--mono); font-size:12.5px; text-align:center;
    border:1px solid var(--line-light); color:rgba(247,245,240,0.8);
    padding:12px 6px; border-radius:2px;
  }
  .map-frame{
    border:1px dashed var(--line-light); border-radius:var(--radius);
    aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:10px; color:rgba(247,245,240,0.4);
    font-family:var(--mono); font-size:12px; text-align:center; padding:20px;
  }

  /* ---------- WHY CHOOSE ---------- */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:10px; }
  @media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }
  .why-item{ padding-left:20px; border-left:2px solid var(--amber); }
  .why-item h4{ font-size:15.5px; margin-bottom:8px; }
  .why-item p{ font-size:13.5px; color:var(--slate); }

  /* ---------- ASSURANCE STRIP ---------- */
  .assurance-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:10px; }
  @media (max-width:980px){ .assurance-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:600px){ .assurance-grid{ grid-template-columns:repeat(2,1fr); } }
  .assure-card{ text-align:left; }
  .assure-card h4{ font-size:14px; margin:14px 0 8px; text-transform:uppercase; letter-spacing:0.02em; }
  .assure-card p{ font-size:12.5px; color:var(--slate); }

  /* ---------- PAYMENT ---------- */
  .pay-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:10px; }
  @media (max-width:980px){ .pay-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:600px){ .pay-grid{ grid-template-columns:repeat(2,1fr); } }
  .pay-card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 18px;
  }
  .pay-card .pnum{ font-family:var(--mono); color:var(--amber-dim); font-size:22px; font-weight:600; display:block; margin-bottom:10px; }
  .pay-card h4{ font-size:14px; margin-bottom:8px; }
  .pay-card p{ font-size:12.5px; color:var(--slate); }

  .pricing-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:56px; }
  @media (max-width:820px){ .pricing-split{ grid-template-columns:1fr; } }
  .pricing-split h4{ font-size:16px; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.02em; }
  .check-list li{ font-size:14px; color:var(--slate); padding:8px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; }
  .check-list li:last-child{ border-bottom:none; }
  .check-list li::before{ content:"—"; color:var(--amber-dim); font-weight:700; }

  /* ---------- COMMITMENT BANNER ---------- */
  .commitment{
    background:linear-gradient(120deg, var(--asphalt), var(--ink));
    color:var(--paper); text-align:center; padding:80px 0;
  }
  .commitment .wrap{ max-width:760px; }
  .commitment h2{ font-size:clamp(26px,4vw,36px); margin-bottom:18px; }
  .commitment p{ color:rgba(247,245,240,0.7); font-size:16px; }

  /* ---------- QUOTE FORM ---------- */
  .quote-section{ background:var(--paper-dim); }
  .quote-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; }
  @media (max-width:900px){ .quote-wrap{ grid-template-columns:1fr; } }
  .quote-info h2{ font-size:clamp(26px,4vw,34px); margin-bottom:16px; }
  .quote-info p{ color:var(--slate); margin-bottom:24px; }
  .quote-info .contact-line{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:14px; padding:10px 0; border-top:1px solid var(--line); }
  .quote-info .contact-line:last-child{ border-bottom:1px solid var(--line); }

  form.quote-form{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .field.full{ grid-column:1/-1; }
  .field label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); }
  .field input, .field select, .field textarea{
    font-family:var(--body); font-size:14px; padding:11px 12px;
    border:1px solid var(--line); border-radius:2px; background:var(--paper);
    color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);
  }
  .form-note{ font-size:12px; color:var(--slate); margin-top:14px; }
  .form-status{ font-family:var(--mono); font-size:13px; margin-top:14px; display:none; }
  .form-status.show{ display:block; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--ink); color:rgba(247,245,240,0.7); padding-top:64px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-light); }
  @media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-brand .logo{ margin-bottom:14px; }
  .footer-brand p{ font-size:13.5px; max-width:280px; color:rgba(247,245,240,0.55); }
  footer h5{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--amber); margin-bottom:18px; }
  footer ul li{ padding:6px 0; font-size:13.5px; }
  footer ul li a:hover{ color:var(--amber); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:12px; color:rgba(247,245,240,0.4); flex-wrap:wrap; gap:10px; }

  .skip-link{ position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink); padding:10px 16px; z-index:200; }
  .skip-link:focus{ left:16px; top:16px; }

  ::selection{ background:var(--amber); color:var(--ink); }