/* ============================================================
   base.css — reset, design tokens, typography
   U&I Express static site
   ============================================================ */

:root {
  /* Brand palette */
  --navy: #1B3A6B;      /* headings, header, dark blocks */
  --blue: #2E6BB8;      /* links, icons */
  --red: #C81E1E;       /* primary action */
  --red-hover: #A81717;
  --orange: #F5820D;    /* figures, accents, route lines */
  --purple: #5B2A86;    /* gradients only */
  --ink: #2D3748;       /* body text */
  --muted: #5A6B84;
  --surface: #F4F7FB;
  --line: #E5EBF4;
  --dark: #0E1F3D;      /* footer */
  --green: #1E9E5A;     /* checklist */

  /* Typography */
  --font-head: 'Montserrat', system-ui, sans-serif;      /* 700/800, letter-spacing -0.02em */
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;  /* 400/500/600 */

  /* Radii & container */
  --radius-btn: 8px;
  --radius-card: 14px;
  --container: 1280px;

  /* Elevation */
  --shadow-card: 0 18px 38px rgba(27, 58, 107, .13);
  --shadow-soft: 0 10px 24px rgba(27, 58, 107, .08);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* prevent horizontal scroll without breaking sticky header */
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
p { margin: 0; }

a { color: var(--blue); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--navy); }

img { max-width: 100%; display: block; }

button { font-family: var(--font-body); cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Material Symbols icon helper ---------- */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  vertical-align: middle;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anchor scroll offset so sticky header never covers section headings */
[id] { scroll-margin-top: 96px; }

/* ---------- Keyframes ---------- */
@keyframes uiMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes uiDash    { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes uiPulse   { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* ---------- Reduced motion: kill marquee, counters, arcs, map SMIL ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}