/* SP Logistics Patch 3 Premium Refinement
   Purpose: tighten hierarchy, remove template feel, fix CTA intent, and improve B2B polish.
   Palette: #155263, #ffc93c, #1e758d, #0c2f39, #ffd76f, #ffbb09
*/

:root{
  --sp-teal:#155263;
  --sp-sky:#1e758d;
  --sp-navy:#0c2f39;
  --sp-footer:#1E3A4E;
  --sp-gold:#ffbb09;
  --sp-yellow:#ffc93c;
  --sp-cream:#ffd76f;
  --sp-ink:#082b35;
  --sp-body:#334d57;
  --sp-muted:#5f737b;
  --sp-border:#d7e4e9;
  --sp-soft:#f4f8fa;
  --sp-paper:#ffffff;
  --sp-warm:#fff9e9;
  --max:1180px;
  --radius:18px;
  --radius-xl:30px;
  --shadow-soft:0 12px 32px rgba(12,47,57,.08);
  --shadow-card:0 18px 44px rgba(12,47,57,.11);
  --shadow-hero:0 28px 70px rgba(12,47,57,.22);
}

/* baseline rhythm */
body{
  color:var(--sp-ink);
  background:#fff;
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.01em;
}
.container{
  max-width:var(--max);
  padding-left:32px;
  padding-right:32px;
}

/* Header: one clean navigation, no second-row noise */
.topline{
  background:var(--sp-navy);
  color:#fff;
  font-size:.76rem;
  font-weight:750;
}
.topline .container{
  min-height:30px;
  align-items:center;
}
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.975);
  border-bottom:1px solid rgba(12,47,57,.11);
  box-shadow:0 4px 18px rgba(12,47,57,.045);
}
.nav-shell{
  min-height:76px;
}
.brand{
  gap:12px;
}
.brand img{
  width:38px;
  opacity:.95;
}
.brand strong{
  font-size:1.08rem;
  letter-spacing:.04em;
}
.brand span span{
  font-size:.58rem;
  letter-spacing:.19em;
}
.primary-nav{
  gap:4px;
}
.primary-nav a{
  font-size:.82rem;
  padding:9px 12px;
  border-radius:999px;
  letter-spacing:-.015em;
}
.primary-nav .quote{
  margin-left:4px;
  background:var(--sp-gold);
  border:1px solid var(--sp-gold);
  color:var(--sp-navy);
  box-shadow:0 9px 22px rgba(255,187,9,.23);
}
.primary-nav .quote:hover{
  background:var(--sp-teal);
  border-color:var(--sp-teal);
  color:#fff;
}
.quick-nav{display:none!important}

/* Hero: premium two-column layout, no overlays */
.hero{
  background:
    radial-gradient(circle at 85% 15%, rgba(255,201,60,.18), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f8fbfb 52%,#fff8e7 100%);
}
.hero.dark{
  background:
    radial-gradient(circle at 75% 16%, rgba(255,187,9,.10), transparent 32%),
    linear-gradient(135deg,#0c2f39 0%,#155263 100%);
  color:#fff;
}
.hero.careers{
  background:
    radial-gradient(circle at 82% 20%, rgba(255,187,9,.16), transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#f8fbfb 58%,#fff8e7 100%);
}
.hero .container{
  padding-top:82px;
  padding-bottom:82px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
  gap:64px;
  align-items:center;
}
.kicker{
  color:var(--sp-teal);
  font-size:.72rem;
  letter-spacing:.16em;
  margin-bottom:20px;
}
.hero.dark .kicker{
  color:#fff;
}
.kicker:before{
  background:var(--sp-gold);
}
.hero h1{
  max-width:760px;
  font-size:clamp(2.7rem,5.3vw,4.95rem);
  line-height:.96;
  letter-spacing:-.062em;
  margin-bottom:24px;
}
.hero.dark h1{
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.hero h1::after{
  content:"";
  display:block;
  width:68px;
  height:5px;
  border-radius:999px;
  background:var(--sp-gold);
  margin-top:24px;
}
.hero.dark h1::after{
  background:var(--sp-gold);
}
.hero .lead{
  max-width:690px;
  color:var(--sp-body);
  font-size:1.08rem;
  line-height:1.72;
}
.hero.dark .lead{
  color:rgba(255,255,255,.86);
}
.hero-media{
  position:relative;
}
.media-card{
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-hero);
}
.media-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.hero-badge{display:none!important}

/* Buttons */
.btn{
  padding:13px 20px;
  font-size:.9rem;
  font-weight:900;
  border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn.primary{
  background:var(--sp-gold);
  border-color:var(--sp-gold);
  color:var(--sp-navy);
}
.btn.primary:hover{
  background:var(--sp-teal);
  border-color:var(--sp-teal);
  color:#fff;
}
.btn:not(.primary):hover{
  background:#fff;
  border-color:var(--sp-teal);
  color:var(--sp-teal);
}
.hero.dark .btn:not(.primary){
  color:var(--sp-navy);
}

/* Proof strip and trust details */
.proof-strip{
  background:linear-gradient(90deg,var(--sp-navy),var(--sp-teal));
}
.proof-strip .container{
  grid-template-columns:repeat(5,1fr);
}
.proof-item{
  padding:24px 22px;
}
.proof-item strong{
  color:var(--sp-cream);
  font-size:1.05rem;
}
.proof-item span{
  color:rgba(255,255,255,.78);
}

/* Sections */
.section{
  padding:88px 0;
}
.section.soft{
  background:linear-gradient(180deg,#f5f9fa 0%,#eef5f7 100%);
}
.section.warm{
  background:linear-gradient(135deg,#fffdf6,#fff7dc);
}
.section-head{
  align-items:start;
  margin-bottom:42px;
}
.section-head h2{
  color:var(--sp-teal);
  font-size:clamp(2rem,3.1vw,3.45rem);
  line-height:1.04;
  letter-spacing:-.045em;
}
.section-head p{
  color:var(--sp-muted);
  line-height:1.7;
}
.eyebrow{
  color:var(--sp-teal);
}

/* Cards: quieter, more enterprise */
.card,.quote-panel,.faq{
  border:1px solid var(--sp-border);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  background:#fff;
}
.card{
  padding:28px;
}
.card h3{
  color:var(--sp-navy);
  font-size:1.18rem;
}
.card p,.faq p,.quote-panel p,.card li{
  color:var(--sp-body);
}
.linked-card:hover{
  transform:translateY(-3px);
  border-color:rgba(21,82,99,.45);
  box-shadow:var(--shadow-card);
}
.card-link{
  border-color:var(--sp-border);
  color:var(--sp-teal);
}
.card-link:hover{
  background:var(--sp-gold);
  border-color:var(--sp-gold);
  color:var(--sp-navy);
}

/* Process and quote panels */
.quote-panel{
  padding:36px;
}
.mini-kpis{
  gap:12px;
}
.mini-kpi{
  background:#f8fbfc;
  border:1px solid var(--sp-border);
  border-radius:14px;
}
.mini-kpi strong{
  color:var(--sp-navy);
  font-size:.96rem;
}
.mini-kpi span{
  color:var(--sp-muted);
}

/* Intent-specific CTA logic */
body[data-page="drivers"] .primary-nav .quote{
  background:var(--sp-teal);
  border-color:var(--sp-teal);
  color:#fff;
}
body[data-page="drivers"] .primary-nav .quote:hover{
  background:var(--sp-gold);
  border-color:var(--sp-gold);
  color:var(--sp-navy);
}
body[data-page="drivers"] .hero h1{
  color:var(--sp-teal);
}
body[data-page="drivers"] .hero .lead{
  color:var(--sp-body);
}

/* CTA band */
.cta-band{
  border-radius:24px;
  background:linear-gradient(135deg,var(--sp-navy),var(--sp-teal));
  box-shadow:0 22px 56px rgba(12,47,57,.17);
}
.cta-band h2,.cta-band h3{
  color:#fff;
}
.cta-band .actions{
  margin-top:0;
}

/* Contact form */
.quote-grid{
  gap:16px;
}
input,select,textarea{
  border-color:#c4d6dc;
  border-radius:12px;
}
input:focus,select:focus,textarea:focus{
  outline:3px solid rgba(255,187,9,.28);
  border-color:var(--sp-teal);
}

/* Footer */
.site-footer{
  background:var(--sp-footer);
}
.footer-grid{
  gap:54px;
}
.site-footer h3,.site-footer h4{
  color:#fff;
}
.site-footer p,.site-footer a{
  color:rgba(255,255,255,.78);
}
.site-footer a:hover{
  color:var(--sp-gold);
}

/* Page polish */
body[data-page="blog"] .grid.three .card,
body[data-page="Services"] .grid.three .card{
  min-height:230px;
}
body[data-page="drivers"] .section.soft{
  background:linear-gradient(180deg,#f2f8fa,#eaf2f5);
}

/* Responsive */
@media (max-width:980px){
  .container{padding-left:24px;padding-right:24px}
  .hero-grid,.split,.section-head{
    grid-template-columns:1fr;
    gap:34px;
  }
  .hero .container{
    padding-top:58px;
    padding-bottom:64px;
  }
  .media-card{
    max-width:720px;
  }
  .primary-nav.open{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .grid.three,.grid.four,.service-matrix{
    grid-template-columns:1fr 1fr;
  }
  .proof-strip .container{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  .topline .container span:first-child{display:none}
  .container{padding-left:18px;padding-right:18px}
  .hero h1{
    font-size:2.45rem;
    letter-spacing:-.05em;
  }
  .hero h1::after{
    margin-top:18px;
  }
  .section{padding:58px 0}
  .grid.two,.grid.three,.grid.four,.service-matrix,.proof-strip .container,.mini-kpis{
    grid-template-columns:1fr!important;
  }
  .quote-panel,.card{
    padding:22px;
  }
  .cta-band{
    padding:28px 22px;
  }
}