/* =============================================================
   Slar Cargo — site.css
   Base reset + responsive layer for the design pages.
   The pages keep their original inline styles for pixel fidelity;
   these rules add mobile responsiveness + the mobile nav on top.
   ============================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }

/* ---- Mobile nav toggle (hidden on desktop) ---- */
.sc-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 40px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.sc-nav-toggle span {
  display: block; width: 24px; height: 2px; background: #000;
  border-radius: 2px; transition: transform .25s ease, opacity .25s ease;
}
.sc-nav.open .sc-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sc-nav.open .sc-nav-toggle span:nth-child(2) { opacity: 0; }
.sc-nav.open .sc-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   Tablet / mobile
   ============================================================= */
@media (max-width: 960px) {
  /* Any two-column (or multi-column) inline grid collapses to one column */
  .sc-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Trim the wide 48px gutters used throughout the design */
  .sc-page section,
  .sc-page > section,
  .sc-page footer > div,
  .sc-nav > div {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Large display type scales down */
  .sc-page h1 { font-size: clamp(30px, 8vw, 46px) !important; line-height: 1.08 !important; }
  .sc-page h2 { font-size: clamp(24px, 6vw, 34px) !important; }

  /* Reduce big vertical section padding a touch */
  .sc-page section[style*="88px"],
  .sc-page section[style*="96px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ---- Mobile navigation ---- */
@media (max-width: 960px) {
  .sc-nav-toggle { display: flex; order: 2; }

  .sc-nav > div { flex-wrap: wrap; }

  .sc-nav .sc-nav-links,
  .sc-nav .sc-nav-actions {
    display: none !important;
    width: 100%;
    flex-basis: 100%;
    order: 3;
  }
  .sc-nav.open .sc-nav-links,
  .sc-nav.open .sc-nav-actions {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px !important;
  }
  .sc-nav.open .sc-nav-links { margin-top: 14px; }
  .sc-nav.open .sc-nav-actions {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* Slider images stack cleanly on very small screens */
@media (max-width: 560px) {
  .sc-page [style*="height:460px"],
  .sc-page [style*="height:420px"] { height: auto !important; min-height: 300px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}