/* JB Cargo Forwarders - public website styles */
:root{
  --green:#0b4d2c; --green-dark:#083a21; --green-light:#e8f2ec;
  --red:#c8102e; --red-dark:#9c0c24;
  --ink:#1b2a22; --muted:#5c6b63; --line:#e2e8e4; --bg:#ffffff; --soft:#f6f9f7;
  --radius:10px; --shadow:0 6px 24px rgba(11,77,44,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--red)}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}
h1,h2,h3,h4{font-weight:700;line-height:1.25;color:var(--green-dark);margin:0 0 14px}
h1{font-size:2.3rem}h2{font-size:1.8rem}h3{font-size:1.2rem}
p{margin:0 0 14px}
.section{padding:64px 0}
.section.soft{background:var(--soft)}
.center{text-align:center}
.lead{font-size:1.06rem;color:var(--muted);max-width:820px}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;color:var(--red);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;margin-bottom:8px}

/* Top bar */
.topbar{background:var(--green-dark);color:#dfeee6;font-size:.84rem}
.topbar .container{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.topbar a{color:#fff}
.topbar .tb-links{display:flex;flex-wrap:wrap;gap:16px}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:52px;width:auto}
.brand-text strong{display:block;color:var(--green-dark);font-size:1.08rem;line-height:1.1}
.brand-text span{font-size:.72rem;color:var(--red);letter-spacing:.08em;text-transform:uppercase}
.main-nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;align-items:center}
.main-nav a{display:block;padding:10px 11px;font-size:.92rem;font-weight:600;color:var(--ink);border-radius:6px}
.main-nav a:hover,.main-nav a.active{color:var(--green);background:var(--green-light)}
.has-sub{position:relative}
.has-sub>ul{display:none;position:absolute;top:100%;left:0;min-width:225px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:6px;flex-direction:column}
.has-sub:hover>ul,.has-sub:focus-within>ul{display:flex}
.nav-toggle{display:none;background:var(--green);color:#fff;border:0;border-radius:6px;padding:10px 13px;font-size:1.1rem;cursor:pointer}

/* Buttons */
.btn{display:inline-block;padding:13px 24px;border-radius:6px;font-weight:700;border:2px solid transparent;cursor:pointer;font-size:.95rem;transition:.18s}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:var(--green-dark);color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.btn-outline:hover{background:#fff;color:var(--green-dark)}
.btn-ghost{background:#fff;color:var(--green);border-color:var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff}
.btn-sm{padding:8px 15px;font-size:.85rem}

/* Hero */
.hero{position:relative;color:#fff;background:linear-gradient(rgba(6,42,24,.82),rgba(6,42,24,.78)),url('../images/hero-freight.jpg') center/cover no-repeat}
.hero .container{padding-top:92px;padding-bottom:92px;max-width:1200px}
.hero h1{color:#fff;font-size:2.7rem;max-width:860px}
.hero p{color:#e3f0e8;font-size:1.12rem;max-width:720px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.hero-badges span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:40px;font-size:.84rem}
.page-hero{background:linear-gradient(rgba(6,42,24,.86),rgba(6,42,24,.86)),url('../images/hero-freight.jpg') center/cover no-repeat;color:#fff;padding:60px 0}
.page-hero h1{color:#fff;margin-bottom:6px}
.page-hero .crumb{font-size:.86rem;color:#cfe4d8}
.page-hero .crumb a{color:#fff}

/* Grid + cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.service-card{overflow:hidden;padding:0;display:flex;flex-direction:column}
.service-card img{height:190px;object-fit:cover;width:100%}
.service-card .body{padding:22px;flex:1;display:flex;flex-direction:column}
.service-card .body p{color:var(--muted);flex:1}
.tick{list-style:none;padding:0;margin:0 0 14px}
.tick li{padding-left:26px;position:relative;margin-bottom:8px;color:var(--muted)}
.tick li:before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:3px;background:var(--red)}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature .ico{flex:0 0 46px;height:46px;border-radius:9px;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.steps{counter-reset:step;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.step{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:8px;padding:20px}
.step b{display:block;color:var(--red);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{background:var(--green-light);color:var(--green-dark);border-radius:30px;padding:7px 15px;font-size:.86rem;font-weight:600}
.stat{background:var(--green-dark);color:#fff;border-radius:10px;padding:22px;text-align:center}
.stat strong{display:block;font-size:1.9rem;color:#fff}
.stat span{font-size:.86rem;color:#c9e2d4}

/* CTA band */
.cta-band{background:var(--green);color:#fff;padding:46px 0}
.cta-band h2{color:#fff;margin-bottom:6px}
.cta-band p{color:#d7ebdf;margin:0}
.cta-flex{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}

/* Forms */
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:.88rem;color:var(--green-dark)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=password],input[type=search],select,textarea{
  width:100%;padding:11px 13px;border:1px solid #cfd9d3;border-radius:6px;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(11,77,44,.12)}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.alert{padding:13px 16px;border-radius:7px;margin-bottom:16px;font-size:.93rem;border:1px solid}
.alert-success{background:#e9f7ef;border-color:#a7dcbd;color:#12643a}
.alert-error{background:#fdeaed;border-color:#f3bcc6;color:#96122b}
.alert-info{background:#eaf1fb;border-color:#bed3f0;color:#1a4b8f}
.alert-warning{background:#fff7e6;border-color:#f3dfae;color:#8a6100}

/* Tracking */
.track-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:var(--shadow)}
.track-form{display:flex;gap:12px;flex-wrap:wrap}
.track-form input{flex:1;min-width:230px}
.timeline{list-style:none;margin:20px 0 0;padding:0 0 0 26px;border-left:3px solid var(--green-light)}
.timeline li{position:relative;padding:0 0 22px 18px}
.timeline li:before{content:"";position:absolute;left:-33px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--green)}
.timeline li.current:before{background:var(--red);border-color:var(--red)}
.timeline strong{display:block;color:var(--green-dark)}
.timeline .meta{font-size:.85rem;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px}
.kv div{border-bottom:1px dashed var(--line);padding-bottom:8px}
.kv span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kv b{color:var(--green-dark)}
.badge{display:inline-block;padding:4px 11px;border-radius:30px;font-size:.78rem;font-weight:700}
.badge.ok{background:#e3f6ea;color:#12643a}
.badge.bad{background:#fdeaed;color:#96122b}
.badge.warn{background:#fff5e0;color:#8a6100}
.badge.info{background:#e8f0fd;color:#1a4b8f}
.badge.muted{background:#eef2f0;color:#455]}
.badge.muted{background:#eef2f0;color:#455a4f}

/* FAQ */
.faq-item{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq-q{width:100%;text-align:left;background:#fff;border:0;padding:16px 18px;font-weight:700;color:var(--green-dark);cursor:pointer;font-size:.98rem;display:flex;justify-content:space-between;gap:12px}
.faq-a{display:none;padding:0 18px 16px;color:var(--muted)}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q{background:var(--green-light)}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
table.data{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
table.data th{background:var(--green-light);color:var(--green-dark);text-align:left;padding:12px;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.data td{padding:11px 12px;border-top:1px solid var(--line)}
table.data tr:hover td{background:#fafcfb}

/* Footer */
.site-footer{background:var(--green-dark);color:#c8ded2;padding:54px 0 0;font-size:.92rem}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.site-footer a{color:#c8ded2}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding:18px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.85rem}
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:80;background:#25d366;color:#fff;border-radius:50px;padding:12px 18px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.whatsapp-float:hover{color:#fff}

@media(max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .nav-toggle{display:block}
  .main-nav{display:none;width:100%}
  .main-nav.open{display:block}
  .nav-wrap{flex-wrap:wrap}
  .main-nav ul{flex-direction:column;align-items:stretch;width:100%;padding-bottom:10px}
  .has-sub>ul{display:none;position:static;box-shadow:none;border:0;padding-left:14px}
  .has-sub.open>ul{display:flex}
  .g2,.g3,.steps,.form-grid,.kv{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  h1{font-size:1.8rem}h2{font-size:1.45rem}
}
@media(max-width:560px){
  .g4{grid-template-columns:1fr}
  .section{padding:44px 0}
}
@media print{
  .site-header,.site-footer,.topbar,.whatsapp-float,.no-print{display:none!important}
}