/* ============================================================
   CE Logistics — Shared full footer
   Loaded only by index.html / about.html / services.html — the 3
   pages that use the full 5-column marketing footer. calculator.html
   and track.html keep their own lighter, page-local footer styling
   on purpose (tool pages, less chrome) and do NOT load this file.
   Markup is injected into the empty <footer class="footer"> tag by
   buildFooter() in mobile-nav.js.
============================================================ */
.footer {
  background: var(--color-neutral-800); color: rgba(255,255,255,0.72);
  padding: 64px 0 32px; margin-top: 96px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand .logo { color: #fff; }
.footer-brand .logo img { filter: brightness(1.05); }
.footer-brand p { font-size: 14px; line-height: 1.7; margin: 16px 0 24px; max-width: 280px; color: rgba(255,255,255,0.6); }
.social { display: flex; gap: 10px; }
.social a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: #fff;
  transition: background var(--duration-fast);
}
.social a:hover { background: rgba(255,255,255,0.16); }
.footer h4 { color: #fff; font-size: 14px; font-weight: 600; margin: 0 0 20px; letter-spacing: 0.04em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a { font-size: 14px; color: rgba(255,255,255,0.6); }
.footer ul a:hover { color: #fff; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a:hover { color: #fff; }