/* Dettra Logistics — design tokens
   Palette:  --dtl-navy #0B2A45 (primary/trust)  --dtl-navy-light #123A5E
             --dtl-amber #D9861F (customs-stamp accent)  --dtl-amber-dark #B36A14
             --dtl-paper #F7F5F0 (section background)    --dtl-ink #1A1D21
             --dtl-steel #64707D (secondary text)        --dtl-line #D8D2C4
   Type: display = 'Space Grotesk', body = 'Inter', data/mono = 'IBM Plex Mono'
*/

:root {
  --dtl-navy: #0b2a45;
  --dtl-navy-light: #123a5e;
  --dtl-amber: #d9861f;
  --dtl-amber-dark: #b36a14;
  --dtl-paper: #f7f5f0;
  --dtl-ink: #1a1d21;
  --dtl-steel: #64707d;
  --dtl-line: #d8d2c4;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--dtl-ink);
  background: var(--dtl-paper);
}

.font-display {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

.font-mono-data {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* --- Customs stamp badge (used for service codes / route numbers / ref numbers) --- */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Corridor divider: a dashed transit line used between sections --- */
.corridor-divider {
  position: relative;
  height: 2px;
  background-image: linear-gradient(to right, var(--dtl-line) 60%, transparent 0%);
  background-size: 14px 2px;
  background-repeat: repeat-x;
}

.corridor-divider::before,
.corridor-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dtl-amber);
  transform: translateY(-50%);
}

.corridor-divider::before {
  left: 0;
}

.corridor-divider::after {
  right: 0;
}

/* --- Waypoint marker used inside the hero route-map SVG / route cards --- */
.waypoint-dot {
  fill: var(--dtl-paper);
  stroke: var(--dtl-amber);
  stroke-width: 3;
}

.waypoint-dot--origin {
  fill: var(--dtl-amber);
}

/* --- Focus visibility, reduced motion respected --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--dtl-amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Service card hover lift, kept subtle on purpose --- */
.service-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px rgba(11, 42, 69, 0.25);
}

/* --- Mobile nav slide --- */
.mobile-nav {
  transition: max-height 0.25s ease;
}