:root {
  --ink: #050505;
  --ink-2: #171717;
  --paper: #f3f3f1;
  --white: #ffffff;
  --orange: #111111;
  --green: #343434;
  --muted: #686868;
  --line: #dededb;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}

.site-header {
  background: rgba(248, 248, 246, 0.94);
}

.brand > span:last-child span,
.eyebrow {
  color: #363636;
}

.hero {
  background:
    radial-gradient(circle at 75% 20%, rgba(0, 0, 0, 0.09), transparent 29%),
    linear-gradient(rgba(5, 5, 5, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 5, 5, 0.025) 1px, transparent 1px),
    linear-gradient(145deg, #ffffff, #e9e9e6);
  background-size: auto, 32px 32px, 32px 32px, auto;
}

.hero h1 {
  max-width: 980px;
}

.route-card {
  border-color: #c9c9c5;
  transform: none;
}

.route-topline {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.button-primary {
  background: #050505;
  border-color: #050505;
}

.route-line {
  background: #050505;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.point {
  background: #050505;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

.vial-section {
  background: #050505;
}

.vial-section .eyebrow,
.vial-section li::before {
  color: #ffffff;
}

.progress span {
  background: #1c1c1c;
}

.product-panel > p {
  color: #3b3b3b;
}

.contact {
  background: #e9e9e6;
}

footer {
  background: #000000;
  color: #d2d2d2;
}