/* ==========================================================================
   Thompson Medical Logistics — Design System
   Tokens: Navy / Teal / White, Space Grotesk + Inter + IBM Plex Mono
   Signature motif: the "live route" — a dashed transit line with a moving
   pulse, used in the hero, section dividers, and the tracking demo panel.
   ========================================================================== */

:root{
  --navy-950:#081524;
  --navy-900:#0B2540;
  --navy-800:#123258;
  --navy-700:#1A4373;
  --navy-600:#255790;
  --teal-600:#0C8C82;
  --teal-500:#0FA79B;
  --teal-400:#2FC6B8;
  --teal-100:#E3F7F4;
  --ink:#0E1A2B;
  --slate-600:#4C5C70;
  --slate-400:#7C8CA0;
  --mist-100:#F5F8F9;
  --mist-50:#FAFCFC;
  --line:#E2E9ED;
  --white:#FFFFFF;
  --amber-600:#B7791F;
  --shadow-sm: 0 1px 2px rgba(11,37,64,.06), 0 1px 1px rgba(11,37,64,.04);
  --shadow-md: 0 8px 24px rgba(11,37,64,.10), 0 2px 6px rgba(11,37,64,.06);
  --shadow-lg: 0 24px 60px rgba(11,37,64,.16), 0 6px 16px rgba(11,37,64,.08);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.font-display{ font-family:'Space Grotesk', 'Inter', sans-serif; }
.font-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

h1,h2,h3,h4{ font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-0.01em; }

::selection{ background:var(--teal-400); color:var(--navy-950); }

/* Focus visibility (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:3px;
  border-radius:6px;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--navy-900); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 10px 0;
  z-index:100; font-weight:600;
}
.skip-link:focus{ left:0; top:0; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--mist-100); }
::-webkit-scrollbar-thumb{ background:var(--navy-600); border-radius:10px; }

/* ---------- Container rhythm ---------- */
.section{ padding-top:5.5rem; padding-bottom:5.5rem; }
@media (max-width:768px){ .section{ padding-top:3.5rem; padding-bottom:3.5rem; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:.95rem; padding:.9rem 1.6rem; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--teal-500); color:var(--white); box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ background:var(--teal-600); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-outline{
  background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.55);
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }
.btn-navy{ background:var(--navy-900); color:#fff; }
.btn-navy:hover{ background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:var(--mist-100); color:var(--navy-900); }
.btn-ghost:hover{ background:var(--line); }

/* ---------- Cards ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }

/* ---------- Eyebrow / badges ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-600); font-weight:600;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--teal-500);
  box-shadow:0 0 0 3px var(--teal-100);
}
.badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600;
  padding:.35rem .75rem; border-radius:999px; background:var(--teal-100); color:var(--teal-600);
}

/* ---------- Signature: the live route line ---------- */
.route-rule{
  position:relative; height:2px; width:100%;
  background-image:linear-gradient(90deg, var(--line) 0, var(--line) 6px, transparent 6px, transparent 14px);
  background-size:14px 2px; background-repeat:repeat-x;
}
.route-rule.on-dark{
  background-image:linear-gradient(90deg, rgba(255,255,255,.25) 0, rgba(255,255,255,.25) 6px, transparent 6px, transparent 14px);
}
.route-pulse{
  position:absolute; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:var(--teal-400); box-shadow:0 0 0 4px rgba(47,198,184,.25), 0 0 12px rgba(47,198,184,.7);
  animation:travel 5.5s linear infinite;
}
@keyframes travel{
  0%{ left:0%; opacity:0; }
  6%{ opacity:1; }
  94%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

/* Ticker chip states used in tracking demo */
.status-chip{
  display:inline-flex; align-items:center; gap:.45rem; font-family:'IBM Plex Mono',monospace;
  font-size:.72rem; letter-spacing:.06em; padding:.3rem .65rem; border-radius:999px;
  background:rgba(255,255,255,.08); color:#CFE8E5; border:1px solid rgba(255,255,255,.16);
}
.status-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-400); }

/* Map pin pulse for service area map */
.pin-pulse{ position:relative; }
.pin-pulse::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--teal-400); opacity:0; animation:pin-ring 2.6s ease-out infinite;
}
@keyframes pin-ring{
  0%{ transform:scale(.5); opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > * { transition-delay:calc(var(--i,0) * 80ms); }

/* ---------- Nav ---------- */
#site-header{ transition:box-shadow .25s ease, background-color .25s ease, padding .25s ease; }
#site-header.scrolled{ box-shadow:0 4px 20px rgba(11,37,64,.08); }

.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--teal-500); transition:width .22s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{ width:100%; }
.nav-link[aria-current="page"]{ color:var(--teal-600); }

/* Mobile menu */
#mobile-menu{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
#mobile-menu.open{ max-height:640px; }

/* ---------- FAQ accordion ---------- */
.faq-item[open] > summary .chev{ transform:rotate(180deg); }
.faq-item summary{ cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .chev{ transition:transform .25s ease; }
.faq-answer{ animation:fade-in .3s ease; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Stat counters ---------- */
.stat-num{ font-family:'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; }

/* ---------- Marquee (trust bar) ---------- */
.marquee-track{ display:flex; gap:3.5rem; animation:marquee 32s linear infinite; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Forms ---------- */
.field-label{ font-size:.82rem; font-weight:600; color:var(--navy-900); margin-bottom:.4rem; display:block; }
.field-input{
  width:100%; border:2px solid #000000; border-radius:var(--radius-sm); padding:.85rem 1.05rem;
  font-size:.95rem; color:var(--ink); background:var(--white); transition:border-color .2s ease, box-shadow .2s ease;
}
.field-input::placeholder{ color:var(--slate-400); }
.field-input:hover{ border-color:#000000; }
.field-input:focus{ border-color:var(--teal-500); box-shadow:0 0 0 4px var(--teal-100); outline:none; }
.field-input.field-error{ border-color:#C0392B; }

/* Callout that points to the dedicated quote form */
.quote-callout{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border-radius:var(--radius-lg);
  border-left:6px solid var(--teal-400);
  box-shadow:var(--shadow-md);
}
.field-error-msg{ color:#C0392B; font-size:.78rem; margin-top:.3rem; display:none; }
.field-error-msg.show{ display:block; }

/* Hero gradient background */
.hero-bg{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(47,198,184,.18), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
}

/* Section wave / divider using route rule */
.divider-route{ position:relative; height:2px; margin:0 auto; }

/* Utility: mono data */
.data-chip{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; background:var(--mist-100);
  border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; color:var(--navy-800);
}

/* Print */
@media print{
  #site-header, #site-footer, .no-print{ display:none !important; }
}