* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden (not clip) on an ancestor forces overflow-y to
     compute to auto, which silently breaks position: sticky for every
     descendant (used by the journey sections) -- clip avoids that pairing
     rule while still preventing horizontal scroll from bleeding elements. */
  overflow-x: clip;
  overflow-y: visible;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin-top: 0;
}

a { color: inherit; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

@media (max-width: 768px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  70% { box-shadow: 0 0 0 15px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@keyframes busmove {
  to { offset-distance: 100%; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes dash {
  to { stroke-dashoffset: -40; }
}