/* ============================================================
   HIGH PERFORMANCE TRANSPORTATION — brand tokens
   Source: hpt-logo.svg (2026-11-05) — geometric mountain mark,
   deep navy, wide-tracked caps. Identity: performance, crisp,
   monochrome navy on light, dark navy hero with ridge accents.
   ============================================================ */

:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --ink: #101b2c;
  --muted: #55647c;
  --line: #dce3ec;
  --brand: #16335b; /* navy pulled from the logo mark */
  --accent: #16335b; /* monochrome CTAs */
  --hero-bg: #0d2137;
  --hero-ink: #f4f7fb;
  --font-display: "Roboto", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius: 4px;
  --tracking-label: 0.22em;
}

/* Subtle mountain-ridge lines along the bottom of the dark hero */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpolygon points='0,320 300,70 620,320' fill='%23ffffff' fill-opacity='0.045'/%3E%3Cpolygon points='380,320 760,30 1150,320' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cpolygon points='920,320 1230,110 1440,320' fill='%23ffffff' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
}
.hero .container {
  position: relative;
  z-index: 1;
}

/* HPT: crisp geometric feel — square-ish corners, tracked caps */
.card {
  border-radius: 0;
}
.btn {
  border-radius: 2px;
}