:root{
  --zs-green:#0aa389;
  --zs-green-2:#067a67;
  --zs-deep:#053a33;
  --zs-dark:#081614;
  --zs-gold:#f2a900;
  --zs-gold-2:#ffcc55;
  --zs-white:#ffffff;
  --zs-gray:#e9f0ef;
  --zs-muted:#9fb7b2;
  --shadow: 0 18px 45px rgba(0,0,0,.18);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.12);
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Smooth anchor scrolling (does not affect normal touch scroll) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--zs-white);
  background: radial-gradient(1200px 800px at 15% 10%, rgba(10,163,137,.35), transparent 55%),
              radial-gradient(900px 600px at 90% 0%, rgba(242,169,0,.25), transparent 60%),
              linear-gradient(180deg, #061412, #050e0d 50%, #040a09);
  line-height:1.5;
  overflow-x:hidden;
}

/* ------------------------------------------------------------
   Mobile/tablet scroll performance tweaks
   Notes:
   - Touch scrolling itself is browser-native; most “jank” on mobile
     comes from expensive paints (filters, backdrop-filter, large shadows).
   - We keep the premium look while dialing down the heaviest effects.
------------------------------------------------------------ */
@media (max-width: 980px){
  /* Backdrop-filter on sticky headers can cause scroll flicker/jank on mobile */
  .nav,
  .zs-wa__fab,
  .zs-wa__panel{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Reduce expensive CSS filters on large background layers */
  .section--bg::before,
  .section--ware::before,
  .section--air::before{
    filter: none !important;
  }

  /* Improve paint containment for long pages */
  .section{
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }

  /* Make the sticky header render more consistently during scroll */
  .nav{
    will-change: transform;
    transform: translateZ(0);
  }
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 12px;background:#111;border-radius:10px;z-index:9999}

/* NAV */
.nav{
  position:sticky;top:0;z-index:999;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(6,20,18,.92), rgba(6,20,18,.65));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:clamp(78px, 5.0vw, 96px);height:clamp(78px, 5.0vw, 96px);border-radius:14px;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 55%),
              linear-gradient(135deg, rgba(10,163,137,1), rgba(6,122,103,1));
  box-shadow: 0 14px 34px rgba(10,163,137,.20), 0 10px 26px rgba(242,169,0,.10);
  position:relative;overflow:hidden;

  transition: transform .18s ease, box-shadow .18s ease;
}
.logo:after{
  content:"";position:absolute;inset:-40%;
  background: conic-gradient(from 180deg, rgba(242,169,0,.9), rgba(255,255,255,0), rgba(242,169,0,.7));
  animation: spin 6s linear infinite;
  opacity:.55;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-title{display:flex;flex-direction:column;line-height:1.1}
.brand-title b{letter-spacing:.3px}
.brand-title small{color:var(--zs-muted);font-weight:600}

.nav-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.nav-links a{
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:14px;
  padding:10px 10px;border-radius:12px;
  transition: all .18s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  background: rgba(242,169,0,.10);
  color:#fff;
  box-shadow: 0 0 0 1px rgba(242,169,0,.45), 0 0 18px rgba(242,169,0,.28), 0 12px 26px rgba(242,169,0,.14);
  outline: none;
}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.14);
  padding:10px 14px;border-radius:14px;
  font-weight:800;font-size:14px;
  cursor:pointer;
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover,
.btn:focus-visible{
  transform: translateY(-1px);
  background: rgba(242,169,0,.10);
  border-color: rgba(242,169,0,.55);
  box-shadow: 0 0 0 1px rgba(242,169,0,.45), 0 0 22px rgba(242,169,0,.28), 0 16px 36px rgba(0,0,0,.28);
  outline: none;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(242,169,0,1), rgba(255,204,85,1));
  color:#111;
  border-color: rgba(255,255,255,.0);
  box-shadow: 0 18px 45px rgba(242,169,0,.22);
}
.btn.primary:hover,
.btn.primary:focus-visible{
  background: linear-gradient(135deg, rgba(255,204,85,1), rgba(242,169,0,1));
  box-shadow: 0 0 0 1px rgba(242,169,0,.45), 0 0 26px rgba(242,169,0,.32), 0 18px 48px rgba(242,169,0,.22);
  outline: none;
}
.btn.ghost{background:transparent}
.hamburger{display:none}

/* Mobile menu button: animated, icon-based, attention-grabbing (mobile/tablet only) */
.hamburger{
  font-weight: 900;
  letter-spacing: .25px;
  color: var(--zs-gold);
  background: rgba(5,58,51,.35);
  border-color: rgba(242,169,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  gap: 10px;
  align-items: center;
  position: relative;
}
.hamburger::before{content:none}

/* Icon */
.burger-icon{
  width: 20px;
  height: 14px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger-icon span{
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  display: block;
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease, filter .22s ease;
}

/* Accessible label (kept visible but subtle) */
.burger-text{
  font-weight: 800;
  font-size: .95rem;
}

/* “Look here” animation (stops after first click via JS) */
.hamburger.attention{
  animation: burgerAttention 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(242,169,0,.0);
}
.hamburger.attention .burger-icon span{
  animation: burgerShimmer 1.6s ease-in-out infinite;
}
@keyframes burgerAttention{
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(242,169,0,0)); }
  35% { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 6px 14px rgba(242,169,0,.22)); }
  60% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(242,169,0,0)); }
  78% { transform: translateX(1px); }
  86% { transform: translateX(-1px); }
}
@keyframes burgerShimmer{
  0%, 100% { filter: drop-shadow(0 0 0 rgba(242,169,0,0)); }
  45% { filter: drop-shadow(0 0 10px rgba(242,169,0,.25)); }
}

/* Open state -> X */
.hamburger.is-open .burger-icon span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.is-open .burger-icon span:nth-child(2){ opacity: 0; }
.hamburger.is-open .burger-icon span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hamburger.attention, .hamburger.attention .burger-icon span{ animation: none !important; }
  .burger-icon span{ transition: none; }
}

.hamburger:focus-visible{
  outline: 3px solid rgba(242,169,0,.55);
  outline-offset: 2px;
}


/* Hide mobile dropdown on desktop */
.mobile-menu{display:none}


/* Mobile menu CTA styling */
.mobile-menu .mobile-cta{
  margin-top: 6px;
  font-weight: 800;
  border: 1px solid rgba(242,169,0,.35);
  background: rgba(242,169,0,.10);
}

@media (max-width: 980px){
  .nav-links{display:none}
  .hamburger{display:inline-flex}
  /* Keep the header clean on mobile: prioritize the menu button */
  .nav-cta .btn:not(.hamburger){display:none}
  .brand-title small{display:none}
  .mobile-menu{
    display:none;
    padding: 12px 0 18px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;padding:12px 10px;border-radius:12px;color:rgba(255,255,255,.88);font-weight:800}
  .mobile-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
}

/* HERO */
.hero{position:relative;padding:56px 0 28px}
.hero-grid{display:grid;grid-template-columns: 1.1fr .9fr;gap:26px;align-items:stretch}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-weight:800;font-size:12px;letter-spacing:.25px;
}
.kicker .dot{width:10px;height:10px;border-radius:99px;background:var(--zs-gold);box-shadow:0 0 0 6px rgba(242,169,0,.12)}
h1{
  font-size: 52px;line-height:1.03;margin:14px 0 14px;
  letter-spacing:-.8px;
}
@media (max-width: 520px){h1{font-size:40px}}
.sub{
  color: rgba(255,255,255,.78);
  font-size:16px;max-width: 62ch;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badge{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding:10px 12px;border-radius:14px;
  color: rgba(255,255,255,.86);
  font-weight:800;font-size:12px;
}
.badge b{color:#fff}
.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.hero-card{padding:18px;position:relative;overflow:hidden}
.hero-card:before{
  content:"";position:absolute;inset:-50%;
  background: radial-gradient(circle at 30% 25%, rgba(10,163,137,.35), transparent 55%),
              radial-gradient(circle at 70% 20%, rgba(242,169,0,.22), transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(255,255,255,.08), transparent 55%);
  transform: rotate(10deg);
}
.hero-card > *{position:relative}
.mini-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.mini-title b{font-size:14px}
.pill{
  font-size:12px;font-weight:900;color:#111;
  padding:8px 10px;border-radius:999px;
  background: rgba(255,204,85,1);
}
.map{
  margin-top:10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(700px 360px at 30% 30%, rgba(10,163,137,.22), transparent 60%),
              radial-gradient(600px 340px at 75% 35%, rgba(242,169,0,.18), transparent 60%),
              linear-gradient(180deg, rgba(7,25,23,.8), rgba(7,18,16,.8));
  padding: 16px;
}
.map svg{width:100%;height:auto}

.map{overflow:hidden; position:relative;}
.map svg{cursor:grab; touch-action:none;}
.map.is-grabbing svg{cursor:grabbing;}

.worldmap .route{fill:none; stroke:url(#routeGrad); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:8 12; opacity:.85;
  animation: dash 6.5s linear infinite;
}
@keyframes dash{to{stroke-dashoffset:-200}}

.worldmap .route-dot{fill: rgba(242,169,0,.95);}
.worldmap .pin-glow{fill: rgba(242,169,0,.18);}
.worldmap .pin-core{fill: rgba(242,169,0,1);}
.worldmap .pin-ring{fill:none; stroke: rgba(242,169,0,.9); stroke-width:2; opacity:.75; animation: ring 1.8s ease-in-out infinite;}
@keyframes ring{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.18);opacity:.35}}

.worldmap .gmap-pin__shape{fill: rgba(242,169,0,1); stroke: rgba(255,255,255,.92); stroke-width:2.2; filter: drop-shadow(0 12px 16px rgba(0,0,0,.35));}
.worldmap .gmap-pin__dot{fill: rgba(7,18,16,1); stroke: rgba(255,255,255,.9); stroke-width:2;}
.worldmap .gmap-pin{transform-origin:center; animation: pinFloat 2.8s ease-in-out infinite;}
@keyframes pinFloat{0%,100%{transform:translate(0,-18px)}50%{transform:translate(0,-22px)}}

.worldmap .origin-label{
  font: 800 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  fill: rgba(255,255,255,.85);
  letter-spacing:.2px;
  paint-order: stroke;
  stroke: rgba(0,0,0,.35);
  stroke-width: 3;
}
.marker{filter: drop-shadow(0 10px 18px rgba(242,169,0,.25));}
.marker circle{animation: pulse 1.8s ease-in-out infinite}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.55}
}
.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;margin-top:14px;
}
@media (max-width: 520px){.stats{grid-template-columns:1fr}}
.stat{
  padding:14px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.stat .num{font-size:22px;font-weight:950;letter-spacing:-.5px}
.stat .lbl{color:rgba(255,255,255,.72);font-weight:800;font-size:12px}

/* SECTIONS */
section{padding:44px 0}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-title h2{margin:0;font-size:28px;letter-spacing:-.4px}
.section-title p{margin:0;color:rgba(255,255,255,.72);max-width:60ch}
.grid{
  display:grid;gap:14px;
}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 980px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width: 620px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

.service{
  padding:16px;
  position:relative;overflow:hidden;
  transition: transform .18s ease, border-color .18s ease;
  min-height: 150px;
}
.service:hover{transform: translateY(-3px);border-color: rgba(255,255,255,.22)}
.icon{
  width:44px;height:44px;border-radius:16px;
  background: linear-gradient(135deg, rgba(10,163,137,1), rgba(6,122,103,1));
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
}
.icon.gold{background: linear-gradient(135deg, rgba(242,169,0,1), rgba(255,204,85,1));color:#111}
.service h3{margin:12px 0 6px;font-size:18px;letter-spacing:-.2px}
.service p{margin:0;color:rgba(255,255,255,.72);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{font-size:12px;font-weight:900;color:rgba(255,255,255,.9);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.chip.gold{background:rgba(242,169,0,.13);border-color:rgba(242,169,0,.25);color:rgba(255,255,255,.95)}
/* interactive */
.tabs{
  display:flex;gap:10px;flex-wrap:wrap;margin: 14px 0 10px;
}
.tab{
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:900;font-size:12px;cursor:pointer;
}
.tab.active{background: rgba(242,169,0,.18);border-color: rgba(242,169,0,.32)}
.panel{display:none}
.panel.active{display:block}

.accordion .item{border:1px solid rgba(255,255,255,.12);border-radius:18px;margin-bottom:10px;overflow:hidden;background:rgba(255,255,255,.03)}
.accordion button{
  width:100%;text-align:left;
  padding:14px 14px;background:transparent;border:0;cursor:pointer;
  color:#fff;font-weight:950;display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.accordion .content{display:none;padding:0 14px 14px;color:rgba(255,255,255,.74)}
.accordion .item.open .content{display:block}
.accordion .chev{transition: transform .18s ease}
.accordion .item.open .chev{transform: rotate(180deg)}

/* forms */
.form{
  padding:18px;
}
.field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
label{font-size:12px;font-weight:900;color:rgba(255,255,255,.82)}
input,select,textarea{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:#fff;padding:12px 12px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color: rgba(242,169,0,.55);box-shadow:0 0 0 4px rgba(242,169,0,.15)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 720px){.form-row{grid-template-columns:1fr}}
.notice{
  padding:12px 14px;border-radius:16px;
  background: rgba(10,163,137,.12);
  border:1px solid rgba(10,163,137,.25);
  color: rgba(255,255,255,.82);
  font-weight:800;font-size:13px;
}
.kpi{
  display:grid;grid-template-columns: repeat(4,1fr);gap:12px;margin-top:12px;
}
@media (max-width: 980px){.kpi{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.kpi{grid-template-columns:1fr}}
.kpi .box{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.kpi .box b{display:block;font-size:18px}
.kpi .box small{color:rgba(255,255,255,.72);font-weight:800}

/* footer */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(6,20,18,.55), rgba(0,0,0,.35));
  padding: 28px 0;
}
.footer-grid{display:grid;grid-template-columns: 1.4fr 1fr 1fr 1fr;gap:18px}
@media (max-width: 980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{margin:0 0 8px;font-size:14px}
.footer a{display:block;padding:8px 10px;border-radius:12px;color:rgba(255,255,255,.78);font-weight:800;transition: all .18s ease}
.footer a:hover,
.footer a:focus-visible{
  color:#fff;
  background: rgba(242,169,0,.10);
  box-shadow: 0 0 0 1px rgba(242,169,0,.45), 0 0 18px rgba(242,169,0,.28), 0 12px 26px rgba(242,169,0,.14);
  outline: none;
}
.small{color:rgba(255,255,255,.6);font-size:12px;font-weight:700}
.hr{height:1px;background:rgba(255,255,255,.08);margin:16px 0}
.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background: rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:12px 14px;border-radius:16px;
  box-shadow: var(--shadow-soft);
  display:none;
  z-index:9999;
}
.toast.show{display:block;animation: pop .18s ease}
@keyframes pop{from{transform:translateX(-50%) translateY(10px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

@media (max-width: 640px){
  .logo{width:112px;height:46px}
  .brand-title small{display:none}
}

/* --- Brand logo update: use official ZS Logistics mark (from company profile) --- */
.logo{
  width:132px;height:52px;border-radius:999px;
  background:#fff;
  border:2px solid var(--zs-gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  overflow:hidden;
}
.logo:after{display:none !important;content:none !important;}
.logo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;padding:0;filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));transition: transform .18s ease, filter .18s ease;}

@media (max-width: 920px){
  .logo{width:64px;height:64px}
}
@media (max-width: 520px){
  .logo{width:58px;height:58px}
}


/* Operational footprint enhancements */
.pill-btn{cursor:pointer}
.coverage-drawer{margin-top:12px}
.coverage-drawer__inner{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 12px;
}

.routes .route{
  stroke-dasharray: 10 10;
  animation: routeDash 2.6s linear infinite;
  opacity:.85;
}
@keyframes routeDash{
  to{stroke-dashoffset:-40}
}


/* WORLD MAP */
.worldmap .continents path{
  fill: rgba(255,255,255,.08);
  stroke: rgba(255,255,255,.14);
  stroke-width: 0.9;
}
.worldmap .routes .route{
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .9;
  stroke-dasharray: 10 10;
  animation: routeDash 6s linear infinite;
}
@keyframes routeDash{
  to{stroke-dashoffset:-200}
}
.worldmap .route-particles .route-dot{
  fill: rgba(242,169,0,.95);
}
.worldmap .pins .pin .pin-glow{
  fill: rgba(242,169,0,.22);
}
.worldmap .pins .pin.origin .pin-glow{
  fill: rgba(10,163,137,.24);
}
.worldmap .pins .pin .pin-core{
  fill: rgba(255,255,255,.95);
}
.worldmap .pins .pin.origin .pin-core{
  fill: rgba(255,255,255,.98);
}
.worldmap .pins .pin .pin-ring{
  fill: none;
  stroke: rgba(242,169,0,.55);
  stroke-width: 1.2;
  opacity: .9;
  animation: pinPulse 2.2s ease-in-out infinite;
}
.worldmap .pins .pin.origin .pin-ring{
  stroke: rgba(10,163,137,.70);
}
@keyframes pinPulse{
  0%,100%{transform: scale(1); opacity: .85}
  50%{transform: scale(1.18); opacity: .35}
}
.worldmap .pin-label{
  fill: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}


/* Google Map embed inside Operational Footprint */
.map.gmap{
  position: relative;
  overflow: hidden;
  padding: 0;
}

.map.gmap .gmap__frame{
  position: relative;
  width: 100%;
  height: 440px;
}

.map.gmap .gmap__frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 22px;
  /* Premium frame */
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  outline: 1px solid rgba(242,169,0,.22);

  /* Brand-aligned “dark” look without requiring a Maps API key */
  filter: invert(0.92) hue-rotate(180deg) saturate(1.25) contrast(1.05);
}

.map.gmap .gmap__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 22px;
  overflow: hidden;
}

.map.gmap .gmap__overlay .worldmap{
  width: 100%;
  height: 100%;
  display: block;
  opacity: .92;
}

/* Tanzania overlay (borders + ports + airports) */
.map.gmap .gmap__overlay .tz-overlay{
  width: 100%;
  height: 100%;
  display: block;
}

.map.gmap .gmap__overlay .tz-border{
  fill: rgba(10, 35, 22, .22);
  stroke: url(#tzStroke);
  stroke-width: 4.5;
  stroke-linejoin: round;
  filter: url(#glow);
  stroke-dasharray: 10 10;
  animation: tzDash 6s linear infinite;
}

.map.gmap .gmap__overlay .tz-route{
  fill: none;
  stroke: rgba(242,169,0,.55);
  stroke-width: 2.5;
  stroke-dasharray: 6 10;
  opacity: .9;
  animation: tzRoute 4.6s linear infinite;
}

.map.gmap .gmap__overlay .tz-nodes .node .dot{
  fill: rgba(255,255,255,.92);
  stroke: rgba(15,107,59,.9);
  stroke-width: 2;
}

.map.gmap .gmap__overlay .tz-nodes .node.port .dot{
  stroke: rgba(242,169,0,.95);
}

/* Border posts (land borders) */
.map.gmap .gmap__overlay .tz-nodes .node.borderpost .dot{
  stroke: rgba(255,255,255,.92);
}

.map.gmap .gmap__overlay .tz-nodes .node.borderpost .pulse{
  fill: rgba(255,255,255,.12);
  stroke: rgba(255,255,255,.35);
}

.map.gmap .gmap__overlay .tz-nodes .node .pulse{
  fill: rgba(242,169,0,.16);
  stroke: rgba(242,169,0,.55);
  stroke-width: 2;
  transform-origin: center;
  animation: tzPulse 2.2s ease-out infinite;
}

.map.gmap .gmap__overlay .tz-nodes .node.airport .pulse{
  fill: rgba(15,107,59,.16);
  stroke: rgba(15,107,59,.55);
}

.map.gmap .gmap__overlay text{
  font-size: 14px;
  font-weight: 700;
  fill: rgba(255,255,255,.92);
  paint-order: stroke;
  stroke: rgba(0,0,0,.55);
  stroke-width: 3;
}

.map.gmap .gmap__overlay{
  mix-blend-mode: screen;
  opacity: .95;
}

/* A gentle “zoom-in” intro feel around the embed (map itself reloads into a higher zoom) */
.map.gmap.is-zooming .gmap__frame{
  animation: gmapFrameZoom 1.2s ease-out;
}

@keyframes tzDash{
  to{ stroke-dashoffset: -220; }
}

@keyframes tzRoute{
  to{ stroke-dashoffset: -140; }
}

@keyframes tzPulse{
  0%{ transform: scale(.8); opacity: .85; }
  70%{ transform: scale(1.8); opacity: 0; }
  100%{ transform: scale(1.8); opacity: 0; }
}

@keyframes gmapFrameZoom{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

.map.gmap .gmap__badge{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
}

.map.gmap .gmap__actions{
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

/* Smaller premium button variant */
.btn.sm{
  padding: 10px 14px;
  font-size: 12px;
  border-radius: 999px;
}


/* Leaflet Tanzania Map */
.map.leaflet{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(242,169,0,.25);
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
  background: rgba(7,18,16,.55);
}
.leaflet-map{
  height: 420px;
  width: 100%;
}
@media (max-width: 900px){
  .leaflet-map{height: 360px;}
}

/* Brand styling for Leaflet tiles (green+gold theme) */
.tzmap--green .leaflet-tile{
  filter: hue-rotate(95deg) saturate(2.1) brightness(0.95) contrast(1.12);
}
.tzmap--green{
  position: relative;
}
.tzmap--green:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 25% 30%, rgba(15,107,59,.35), transparent 60%),
              radial-gradient(700px 380px at 75% 70%, rgba(242,169,0,.18), transparent 65%),
              linear-gradient(180deg, rgba(7,18,16,.15), rgba(7,18,16,.35));
  pointer-events:none;
  mix-blend-mode: multiply;
  z-index: 400; /* above tiles, below markers */
}
/* Controls */
.leaflet-control-zoom a{
  background: rgba(10,34,24,.72) !important;
  color: rgba(242,169,0,.95) !important;
  border: 1px solid rgba(242,169,0,.25) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.28);
}
.leaflet-bar{
  border-radius: 14px !important;
  overflow: hidden;
}
.leaflet-control-attribution{
  background: rgba(10,34,24,.35) !important;
  color: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(242,169,0,.15);
  border-radius: 12px;
  margin: 8px;
  padding: 4px 8px;
  backdrop-filter: blur(6px);
}
.leaflet-control-attribution a{ color: rgba(242,169,0,.75) !important; }

/* Marker styling */
.zs-marker{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  position: relative;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 18px rgba(0,0,0,.35);
}
.zs-marker::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 1px solid rgba(242,169,0,.55);
  opacity: .0;
  transform: scale(.4);
  animation: zsPulse 2.2s ease-out infinite;
}
.zs-marker.port{ background: rgba(242,169,0,1); }
.zs-marker.airport{ background: rgba(15,107,59,1); }
.zs-marker.border{ background: rgba(255,255,255,.92); }
.zs-marker.hq{ background: rgba(242,169,0,1); box-shadow: 0 16px 26px rgba(242,169,0,.18), 0 14px 22px rgba(0,0,0,.35); }

@keyframes zsPulse{
  0%{ opacity:0; transform: scale(.4);} 
  20%{ opacity:.55;}
  100%{ opacity:0; transform: scale(1.25);}
}

/* Animated route lines */
.leaflet-overlay-pane svg path.zs-route{
  stroke: rgba(242,169,0,.75);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.25));
  animation: zsDash 3.5s linear infinite;
}
@keyframes zsDash{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -36; }
}

/* Country outline */
.leaflet-interactive.tz-boundary{
  stroke: rgba(242,169,0,.9);
  stroke-width: 2.4;
  fill: rgba(15,107,59,.14);
}

/* Leaflet divIcon pins */
.pin{width:18px;height:18px;}
.pin span{display:block;width:14px;height:14px;border-radius:999px;position:relative;border:2px solid rgba(255,255,255,.9);box-shadow:0 12px 18px rgba(0,0,0,.35);margin:2px;}
.pin span::after{content:'';position:absolute;inset:-10px;border-radius:999px;border:1px solid rgba(242,169,0,.55);opacity:0;transform:scale(.4);animation:zsPulse 2.2s ease-out infinite;}
.pin--port span{background:rgba(242,169,0,1);}
.pin--airport span{background:rgba(15,107,59,1);}
.pin--border span{background:rgba(255,255,255,.92);}

/* Layers control (toggle) */
.leaflet-control-layers{
  background: rgba(10,34,24,.72) !important;
  border: 1px solid rgba(242,169,0,.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  color: rgba(255,255,255,.75);
}
.leaflet-control-layers-expanded{ padding: 10px 12px; }
.leaflet-control-layers a{ color: rgba(242,169,0,.85) !important; }
.leaflet-control-layers-separator{ border-top: 1px solid rgba(242,169,0,.18); }


/* Moving arrow marker */
.zs-arrow{
  width: 20px;
  height: 20px;
}
.zs-arrow__tri{
  display:block;
  width:0;height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:12px solid rgba(242,169,0,.98);
  filter: drop-shadow(0 0 8px rgba(242,169,0,.55));
  transform: translate(3px,4px) rotate(var(--zs-rot, 0deg));
  transform-origin: 4px 6px;
}


/* Clients marquee (homepage) */
.clients-section{
  padding: 56px 0;
  position: relative;
}
.clients-section .section-title{
  align-items: flex-end;
}
.logo-marquee{
  margin-top: 18px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(800px 300px at 20% 0%, rgba(10,163,137,0.18), transparent 60%),
              radial-gradient(900px 320px at 80% 100%, rgba(242,169,0,0.16), transparent 60%),
              rgba(255,255,255,0.03);
}
.logo-marquee::before,
.logo-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:90px;
  z-index: 2;
  pointer-events:none;
}
.logo-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(10,12,18,0.95), rgba(10,12,18,0));
}
.logo-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(10,12,18,0.95), rgba(10,12,18,0));
}
.logo-track{
  display:flex;
  flex-wrap:nowrap;
  gap: 24px;
  align-items:center;
  width: max-content;
  padding: 18px;
  animation: logoScroll 55s linear infinite;
  will-change: transform;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
}
.logo-marquee:hover .logo-track{
  animation-play-state: paused;
}
.logo-item{
  flex: 0 0 auto;
  width: 200px;
  min-width: 200px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
}
.logo-item img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block;}
@keyframes logoScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (max-width: 900px){
  .logo-item{ width: 170px; height: 86px; ; padding: 12px}
  .logo-marquee::before, .logo-marquee::after{ width: 60px; }
}


/* ====== Corporate Cinematic Visual Upgrade (Deep Green) ====== */
:root{
  --zs-deep: #06110f;
  --zs-deep-2:#071a15;
  --zs-emerald:#0aa389;
  --zs-emerald-2:#16c6a5;
  --zs-glow: rgba(22,198,165,.25);
}

body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(22,198,165,.18), transparent 60%),
    radial-gradient(1000px 520px at 80% 10%, rgba(229,185,95,.10), transparent 55%),
    linear-gradient(180deg, var(--zs-deep) 0%, #050b0a 100%);
}

/* Parallax hero */
.hero--parallax{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero--parallax .hero-bg{
  position:absolute;
  inset:-10% -10% -10% -10%;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  background-attachment: scroll, scroll, fixed;
  transform: translate3d(0,0,0) scale(1.08);
  will-change: transform;
  filter: saturate(1.08) contrast(1.08) brightness(1.12);
  z-index: -3;
}
.hero--parallax .hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(10,163,137,.14), transparent 60%),
    radial-gradient(800px 540px at 80% 15%, rgba(229,185,95,.10), transparent 55%),
    linear-gradient(180deg, rgba(3,10,9,.38) 0%, rgba(3,10,9,.64) 68%, rgba(3,10,9,.80) 100%);
  z-index:-2;
}
.hero--parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.18;
  mask-image: radial-gradient(700px 420px at 35% 30%, #000 45%, transparent 75%);
  z-index:-1;
  pointer-events:none;
}

/* Section backgrounds */
.section{
  position: relative;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}


/* Generic background-image sections (used on homepage) */
.section--bg{
  position: relative;
}
\.section--bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  /* Tuned for clarity: match the crisp “View all services” look */
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(22,198,165,.14), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg,
      rgba(6,17,15,.22) 0%,
      rgba(6,17,15,.38) 55%,
      rgba(6,17,15,.58) 100%
    ),
    var(--section-image);
  background-size: cover;
  background-position: center;
  background-attachment: scroll, scroll, scroll, fixed;
  filter: saturate(1.10) contrast(1.12) brightness(1.22);
  opacity: 1;
}

.section--ware::before{
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(22,198,165,.22), transparent 60%),
    linear-gradient(180deg,
      rgba(6,17,15,.34) 0%,
      rgba(6,17,15,.52) 55%,
      rgba(6,17,15,.72) 100%
    ),
    url("../img/port-dusk.webp");
  background-size: cover;
  background-position: center;
  background-attachment: scroll, scroll, fixed;
  filter: saturate(1.10) contrast(1.12) brightness(1.22);
  opacity: 1;
}
.section--dark{
  background: linear-gradient(180deg, rgba(5,11,10,.96), rgba(5,11,10,.98));
}

.section--air::before{
  background:
    radial-gradient(1000px 600px at 20% 25%, rgba(0,160,110,.35), transparent 60%),
    radial-gradient(800px 500px at 85% 15%, rgba(212,175,55,.25), transparent 55%),
    linear-gradient(180deg,
      rgba(3,18,14,.45) 0%,
      rgba(3,18,14,.65) 55%,
      rgba(3,18,14,.80) 100%
    ),
    url("../img/aircargo.webp");
  background-size: cover;
  background-position: center;
  filter: saturate(1.15) contrast(1.15) brightness(1.15);
  opacity: 1;
}


.section--dark .section-title h2,
.section--dark p,
.section--dark .small{
  color: rgba(255,255,255,.92);
}

/* More corporate cards */
.card, .service-card, .panel{
  backdrop-filter: blur(10px);
}
.card{
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}
.service-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.30);
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
  border-color: rgba(22,198,165,.30);
}
.badge, .stat, .chip{
  border-color: rgba(255,255,255,.12);
}

/* Make hamburger more visible on cinematic hero */
.btn.hamburger{
  /* Gold-themed (prevents the button from looking black on some pages)
     while still keeping contrast against bright hero imagery. */
  background: linear-gradient(135deg, rgba(242,169,0,.18), rgba(255,204,85,.10));
  border: 1px solid rgba(242,169,0,.40);
  box-shadow: 0 14px 40px rgba(242,169,0,.12);
}
.btn.hamburger:focus-visible{
  outline: 3px solid rgba(22,198,165,.45);
  outline-offset: 2px;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .hero--parallax .hero-bg{ transform:none !important; }
}


/* Image contrast boost (opt-in): add class="img-boost" to <img> when needed */
.img-boost{filter: brightness(1.12) contrast(1.10) saturate(1.06);}


/* Elegant animated underline (AEO highlight) */
.elegant-underline{
  position: relative;
  font-weight: 700;
  color: var(--zs-green-2);
  white-space: nowrap;
}
.elegant-underline::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(242,169,0,.15), var(--zs-gold), var(--zs-gold-2), var(--zs-gold), rgba(242,169,0,.15));
  background-size: 220% 100%;
  box-shadow: 0 6px 18px rgba(242,169,0,.22);
  animation: zsUnderlineShimmer 2.6s ease-in-out infinite;
}
@keyframes zsUnderlineShimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .elegant-underline::after{ animation: none; }
}


/* AEO certificate link styling */
.aeo-link{color:inherit;text-decoration:none;position:relative;}
.aeo-link:focus-visible{outline:2px solid rgba(242,169,0,.75);outline-offset:4px;border-radius:10px;}
.aeo-link:hover .elegant-underline{filter: drop-shadow(0 0 10px rgba(242,169,0,.35));}

/* --- WhatsApp Widget (homepage only) --- */
.zs-wa{position:fixed;left:18px;bottom:18px;z-index:9999;font-family:inherit}
.zs-wa__fab{width:56px;height:56px;border-radius:999px;border:1px solid rgba(242,169,0,.55);background:radial-gradient(120% 120% at 30% 20%, rgba(255,204,85,.55), rgba(242,169,0,.22)), linear-gradient(180deg, rgba(10,163,137,.20), rgba(6,122,103,.15));backdrop-filter:blur(10px);box-shadow:0 16px 35px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.zs-wa__fab:hover{transform:translateY(-2px);box-shadow:0 20px 45px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset}
.zs-wa__fabIcon{color:var(--zs-gold)}

.zs-wa__panel{position:absolute;left:0;bottom:70px;width:320px;max-width:calc(100vw - 36px);padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(6,20,18,.96), rgba(6,20,18,.78));backdrop-filter:blur(14px);box-shadow:0 22px 60px rgba(0,0,0,.35);transform:translateY(10px);opacity:0;pointer-events:none;transition:opacity .16s ease, transform .16s ease}
.zs-wa.is-open .zs-wa__panel{opacity:1;transform:translateY(0);pointer-events:auto}

.zs-wa__head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.zs-wa__title{font-weight:800;letter-spacing:.2px}
.zs-wa__sub{font-size:12px;color:rgba(255,255,255,.75)}
.zs-wa__close{border:0;background:transparent;color:rgba(255,255,255,.75);font-size:22px;line-height:1;cursor:pointer;padding:0 6px}
.zs-wa__close:hover{color:#fff}

.zs-wa__label{display:block;font-size:12px;color:rgba(255,255,255,.75);margin:8px 0 6px}
.zs-wa__msg{width:100%;resize:none;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;padding:10px 12px;outline:none}
.zs-wa__msg:focus{border-color:rgba(242,169,0,.55);box-shadow:0 0 0 4px rgba(242,169,0,.12)}

.zs-wa__list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.zs-wa__item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(10,163,137,.12), rgba(10,163,137,.06));transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease}
.zs-wa__item:hover{transform:translateY(-1px);border-color:rgba(242,169,0,.45);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.zs-wa__dot{width:10px;height:10px;border-radius:999px;background:radial-gradient(circle at 35% 35%, var(--zs-gold-2), var(--zs-gold));box-shadow:0 0 0 3px rgba(242,169,0,.14)}
.zs-wa__hint{margin-top:10px;font-size:12px;color:rgba(255,255,255,.70)}

@media (max-width: 520px){
  .zs-wa{left:12px;bottom:12px}
  .zs-wa__panel{bottom:66px;width:300px}
}

/* ===== Header brand logo (bigger for visibility) ===== */
.logo{
  /* container in header */
  width: 200px;
  height: 72px;
  border-radius: 10px;         /* square-ish, not oval */
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
.logo:after{display:none !important;content:none !important;}
.logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  clip-path: inset(0 2px);
  display:block;
  border-radius: 0;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.45));
  transition: transform .2s ease, filter .2s ease;
}
.logo img:hover{
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.65));
  transform: scale(1.01);
}
@media (max-width: 920px){
  .logo{ width: 170px; height: 64px; }
}
@media (max-width: 640px){
  .logo{ width: 150px; height: 58px; }
}

/* === Premium header + consistent CTA colors (v12) === */
.brand .logo{transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.brand:hover .logo{transform:scale(1.04);box-shadow:none;}

.nav-links a{
  position:relative;
  transition: color .18s ease, text-shadow .18s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color: var(--zs-gold-2);
  text-shadow: 0 0 10px rgba(242,169,0,.55), 0 0 22px rgba(242,169,0,.25);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-8px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(242,169,0,0), rgba(242,169,0,.95), rgba(255,204,85,.95), rgba(242,169,0,0));
  opacity:0;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{opacity:1;transform: translateY(0)}

/* Make ALL clickable buttons consistent gold across the site */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.pill-btn{
  background: linear-gradient(135deg, rgba(242,169,0,1), rgba(255,204,85,1)) !important;
  color:#111 !important;
  border-color: rgba(255,255,255,0) !important;
  box-shadow: 0 18px 45px rgba(242,169,0,.22) !important;
}
.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.pill-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,204,85,1), rgba(242,169,0,1)) !important;
}
.btn.ghost{background: linear-gradient(135deg, rgba(242,169,0,1), rgba(255,204,85,1)) !important;}
.btn:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.pill-btn:focus-visible{
  outline: 2px solid rgba(255,204,85,.75);
  outline-offset: 3px;
}


/* Header brand logo: fill container on hover for stronger visibility */
.brand:hover .logo img{transform:scale(1.03);filter: drop-shadow(0 10px 18px rgba(0,0,0,.30)) drop-shadow(0 0 18px rgba(242,169,0,.14));}


/* ------------------------------------------------------------
   Premium upgrades (v9.5 look)
------------------------------------------------------------ */

/* Nav link premium gold glow on hover/focus */
.nav-links a:hover,
.nav-links a:focus-visible{
  box-shadow: 0 0 0 1px rgba(242,169,0,.22), 0 10px 26px rgba(242,169,0,.10);
  text-shadow: 0 0 14px rgba(242,169,0,.22);
}

/* Premium section variant */
.section--proof::before{
  filter: saturate(1.1) contrast(1.08) brightness(.92);
}

/* KPI grid cards */
.kpi-grid{ gap: 14px; }
@media (max-width: 980px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .kpi-grid{ grid-template-columns: 1fr; }
}
.kpi-card{
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(242,169,0,.18);
  box-shadow: var(--shadow-soft);
}
.kpi-num{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
}
.kpi-label{
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  font-weight: 750;
  font-size: 13px;
}

/* Steps list */
.steps{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
}
.steps li{
  margin: 10px 0;
}
.steps li b{
  display:block;
  font-weight: 900;
}
.steps li span{
  display:block;
  color: rgba(255,255,255,.66);
  font-size: 13px;
  margin-top: 2px;
}

/* Testimonials */
.testimonials{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.tcard{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.tcard p{ margin:0; color: rgba(255,255,255,.82); }
.tmeta{ margin-top: 8px; display:flex; gap: 10px; align-items:baseline; }
.tmeta b{ font-weight: 900; }
.tmeta span{ color: rgba(255,255,255,.58); font-size: 12px; font-weight: 700; }

/* Map: add a subtle animated network overlay for premium depth */
.map.leaflet::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 420px at 20% 20%, rgba(242,169,0,.10), transparent 60%),
    radial-gradient(900px 520px at 80% 80%, rgba(10,163,137,.10), transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,.00), rgba(255,255,255,.06), rgba(255,255,255,.00));
  mix-blend-mode: screen;
  opacity: .65;
  animation: zsMapSheen 6.5s ease-in-out infinite;
  z-index: 450; /* above tile overlay, below markers */
}
@keyframes zsMapSheen{
  0%{ transform: translateX(-18%); opacity:.45; }
  55%{ opacity:.75; }
  100%{ transform: translateX(18%); opacity:.45; }
}

/* Leaflet layers control styling */
.leaflet-control-layers{
  background: rgba(10,34,24,.72) !important;
  border: 1px solid rgba(242,169,0,.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 22px rgba(0,0,0,.30);
  color: rgba(255,255,255,.85);
}
.leaflet-control-layers a{ color: rgba(242,169,0,.9) !important; }

/* Tooltip styling */
.leaflet-tooltip{
  background: rgba(8,22,20,.92) !important;
  border: 1px solid rgba(242,169,0,.24) !important;
  color: rgba(255,255,255,.88) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  box-shadow: 0 14px 22px rgba(0,0,0,.34);
}

/* Animated arrow marker */
.zs-arrow{ transform: rotate(var(--zs-rot, 0deg)); }
.zs-arrow__tri{
  width: 0; height: 0;
  border-left: 10px solid rgba(242,169,0,.95);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(242,169,0,.22));
  display:block;
}


/* ------------------------------------------------------------
   Premium motion + reveal (visual allure without being flashy)
------------------------------------------------------------ */
.reveal{
  opacity:0;
  transform: translateY(14px);
  filter: blur(8px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
  filter: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
}

/* Thin progress indicator (subtle, premium) */
.zs-progress{
  position:fixed;left:0;top:0;height:3px;z-index:1200;
  width:0%;
  background: linear-gradient(90deg, rgba(242,169,0,.95), rgba(10,163,137,.95));
  box-shadow: 0 8px 24px rgba(242,169,0,.18);
}

/* Back-to-top */
.zs-top{
  position:fixed;right:16px;bottom:16px;z-index:1100;
  opacity:0;transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.zs-top.show{opacity:1;transform:none}
.zs-top .btn{padding:10px 12px;border-radius:999px}

/* Trust strip on homepage */
.trust-strip{
  margin-top:16px;
  display:flex;gap:10px;flex-wrap:wrap;
  padding:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.trust-strip::before{
  content:"";position:absolute;inset:-40%;
  background: radial-gradient(circle at 20% 20%, rgba(242,169,0,.14), transparent 45%),
              radial-gradient(circle at 70% 30%, rgba(10,163,137,.16), transparent 55%);
  animation: floaty 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floaty{
  0%,100%{transform: translate3d(0,0,0)}
  50%{transform: translate3d(20px, -14px, 0)}
}
.trust-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;font-size:13px;
}
.trust-pill .dot{width:8px;height:8px;border-radius:999px;background: var(--zs-gold); box-shadow: 0 0 18px rgba(242,169,0,.55)}

/* Case studies */
.card.case{padding:18px}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.case-tag{font-weight:900;letter-spacing:.2px;color:rgba(255,255,255,.82);font-size:13px}
.case-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpi-mini{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.kpi-mini b{font-size:18px}
.kpi-mini small{display:block;color:rgba(255,255,255,.65);font-weight:700;margin-top:2px}
.case-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.case-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width: 860px){
  .case-kpis{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
}

/* Trust bar on compliance hero */
.trustbar{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:14px
}
.trust{
  padding:10px 12px;border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
}
.trust b{font-size:18px}
.trust small{display:block;color:rgba(255,255,255,.65);font-weight:800;margin-top:2px}

/* Tabs (case studies filter UX) */
.tabs{display:flex;gap:10px;flex-wrap:wrap}
.pill-btn{
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.pill-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(242,169,0,.10);
}

.card:hover{transform: translateY(-2px);border-color: rgba(242,169,0,.22);box-shadow: 0 18px 45px rgba(0,0,0,.20)}


/* Visual panels (homepage contextual imagery) */
.visual-panels{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}
.visual-panel{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  min-height: 170px;
  transform: translateZ(0);
}
.visual-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(22,198,165,.16), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, rgba(3,10,9,.30) 0%, rgba(3,10,9,.72) 68%, rgba(3,10,9,.86) 100%),
    var(--panel-image);
  background-size: cover;
  background-position:center;
  filter: saturate(1.08) contrast(1.12) brightness(1.10);
  transition: transform .9s ease, filter .9s ease;
  transform: scale(1.06);
}
.visual-panel:hover::before{
  transform: scale(1.12);
  filter: saturate(1.12) contrast(1.16) brightness(1.12);
}
.visual-panel .vp-inner{
  position:relative;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
}
.visual-panel .vp-kicker{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visual-panel .vp-title{
  margin-top:6px;
  font-weight:800;
  font-size: 18px;
}
.visual-panel .vp-title span{
  color: var(--zs-gold);
}
@media (max-width: 860px){
  .visual-panels{ grid-template-columns: 1fr; }
  .section--bg::before{ background-attachment: scroll, scroll, scroll, scroll; }
  .section--ware::before, .section--air::before{ background-attachment: scroll, scroll, scroll; }
}


/* --- Unique cinematic background per page --- */
body.page-bg{
  background-color: #061510;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 100vh;
}
@media (min-width: 861px){
  body.page-bg{ background-attachment: fixed; }
}
body.page-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Dark cinematic overlay + subtle vignette for legibility */
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(10, 38, 26, 0.15), rgba(6, 21, 16, 0.62)),
    radial-gradient(1200px 800px at 85% 30%, rgba(255, 196, 77, 0.08), rgba(6, 21, 16, 0.68)),
    linear-gradient(180deg, rgba(6,21,16,0.34) 0%, rgba(6,21,16,0.54) 55%, rgba(6,21,16,0.72) 100%);
}

/* Map page keys to their background images */
body.page-bg[data-page="home"]{ background-image: url("../img/hero-port.webp"); }
body.page-bg[data-page="services"]{ background-image: url("../img/page-bg/services-warehouse-forklift.webp"); }
body.page-bg[data-page="industries"]{ background-image: url("../img/page-bg/industries-port-ship.webp"); }
body.page-bg[data-page="coverage"]{ background-image: url("../img/page-bg/coverage-port-aerial.webp"); }
body.page-bg[data-page="requirements"]{ background-image: url("../img/page-bg/requirements-docs.webp"); }
body.page-bg[data-page="track"]{ background-image: url("../img/page-bg/track-trucks-road.webp"); }
body.page-bg[data-page="quote"]{ background-image: url("../img/page-bg/quote-airplane.webp"); }
body.page-bg[data-page="about"]{ background-image: url("../img/page-bg/about-meeting.webp"); }
body.page-bg[data-page="contact"]{ background-image: url("../img/page-bg/contact-handshake.webp"); }
body.page-bg[data-page="case-studies"]{ background-image: url("../img/page-bg/case-studies-port-cranes.webp"); }
body.page-bg[data-page="compliance"]{ background-image: url("../img/page-bg/compliance-audit.webp"); }
body.page-bg[data-page="resources"]{ background-image: url("../img/page-bg/resources-warehouse-machinery.webp"); }
body.page-bg[data-page="privacy"]{ background-image: url("../img/page-bg/privacy-warehouse-bw.webp"); }
body.page-bg[data-page="terms"]{ background-image: url("../img/page-bg/terms-warehouse-bw2.webp"); }

body.page-bg > *{ position: relative; z-index: 1; }


/* --- Sticky floating actions: WhatsApp left, Back-to-top right (forced) --- */
.zs-wa{
  position: fixed !important;
  left: 18px !important;
  right: auto !important;
  bottom: 18px !important;
  z-index: 9999 !important;
}
.zs-wa__panel{
  left: 0 !important;
  right: auto !important;
}
.zs-top{
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  bottom: 18px !important;
  z-index: 11000 !important;
}
/* keep spacing on small screens */
@media (max-width: 600px){
  .zs-wa{ left: 12px !important; bottom: 12px !important; }
  .zs-top{ right: 12px !important; bottom: 12px !important; }
}



/* Ensure the back-to-top button stays visible once injected */
.zs-top{ opacity: 1 !important; transform: none !important; }

/* --- Dark dropdown styling (Coverage + Contact selects) --- */
.zs-select-dark{
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(212,175,55,.45) !important;
}
.zs-select-dark:focus{
  outline: none !important;
  border-color: rgba(212,175,55,.9) !important;
  box-shadow: 0 0 10px rgba(212,175,55,.55) !important;
}
.zs-select-dark option{
  background-color: #000;
  color: #fff;
}