@font-face {
  font-family: Inter;
  src: url("/assets/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --orange: #ff4d24;
  --wordmark: #c1cdd6;
  --ink: #090f19;
  --surface: #0e1724;
  --panel: #121e2d;
  --panel-deep: #0c1521;
  --text: #edf1f5;
  --muted: #aab6c4;
  --subtle: #8a9bad;
  --line: #273345;
  --max: 1316px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 106px;
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(42px, 4.5vw, 62px);
}
h2 {
  font-size: clamp(31px, 3vw, 40px);
}
h3 {
  font-size: 23px;
}
h4 {
  font-size: 19px;
}
p {
  color: var(--muted);
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
summary {
  cursor: pointer;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button svg,
a svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex-shrink: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 5px;
}
::selection {
  background: var(--orange);
  color: var(--ink);
}
[hidden] {
  display: none !important;
}
.container {
  width: min(calc(100% - 64px), var(--max));
  margin-inline: auto;
}
.section {
  padding: 80px 0;
}
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: #ed9a82;
  line-height: 1.6;
  margin-bottom: 18px;
}
.lede {
  font-size: 18px;
  line-height: 1.75;
  max-width: 56ch;
}
.large-copy {
  font-size: 19px;
  line-height: 1.8;
  max-width: 52ch;
}
.large-copy p + p {
  margin-top: 24px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.split h2 + p {
  margin-top: 24px;
}
.split .text-link {
  margin-top: 24px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 40px;
}
.section-heading > p:not(.eyebrow),
.section-heading > div > p:not(.eyebrow) {
  font-size: 18px;
  max-width: 47ch;
}
.section-heading .text-link {
  margin-top: 18px;
}
.section-heading-centered {
  display: block;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.section-heading-centered h2 {
  max-width: 700px;
  margin-inline: auto;
}
.section-heading-centered h2 span {
  display: block;
}
.section-heading-centered > p:not(.eyebrow) {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 18px;
}
.section-heading-centered .eyebrow {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.section-heading-centered .eyebrow::before,
.section-heading-centered .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: #ff4d2455;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 52px;
  padding: 13px 23px;
  background: #b63c20;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 6px;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    transform 0.25s var(--ease);
}
.button:hover {
  background: #a3341b;
  box-shadow: 0 6px 22px #ff4d241a;
  transform: translateY(-2px);
}
.button svg {
  width: 19px;
  transition: transform 0.25s;
}
.button:hover svg {
  transform: translateX(3px);
}
.button-dark {
  background: #b63c20;
  color: #fff;
}
.text-link {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  color: #dfe7f0;
  transition: color 0.2s;
}
.text-link:hover {
  color: #ff8c6f;
}
.text-link svg {
  width: 20px;
}
.skip-link {
  position: fixed;
  top: -70px;
  left: 16px;
  padding: 12px;
  background: var(--orange);
  color: var(--ink);
  z-index: 100;
}
.skip-link:focus {
  top: 12px;
}
/* Lightweight persistent navigation */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  color: var(--text);
  background: #090f19;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #c1cdd612;
  transition: background 0.3s;
}
.nav-wrap {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-height: 44px;
}
.brand-mark {
  display: block;
  background: var(--orange);
  width: 48px;
  height: 31px;
  flex: 0 0 48px;
  mask: url("/assets/waw-logo-transparant.png") -11px -11px / 72px auto
    no-repeat;
}
.wordmark-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wordmark);
}
#primary-nav {
  display: flex;
  align-items: center;
  gap: 27px;
}
#primary-nav > a:not(.button) {
  font-size: 14px;
  line-height: 44px;
  color: #c0cad5;
  position: relative;
}
#primary-nav > a:not(.button):hover,
#primary-nav > [aria-current] {
  color: #ff997b;
}
#primary-nav > .portal-link {
  margin-left: 18px;
}
#primary-nav .button {
  min-height: 44px;
  padding: 10px 16px;
  gap: 20px;
  font-size: 13px;
}
.menu-toggle,
.mobile-nav-label,
.mobile-nav-note {
  display: none;
}
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 40;
  pointer-events: none;
}
/* Cinematic hero: the final film shares the same media layer */
.hero {
  position: relative;
  min-height: 690px;
  height: min(800px, 100svh);
  background: var(--ink);
  color: var(--text);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 60%;
}
.hero-media {
  inset: -1px;
  background: var(--ink);
}
.hero-shade {
  background:
    linear-gradient(90deg, #090f19, #090f19c9 37%, #090f1933 78%),
    linear-gradient(0deg, #090f19f2, transparent 38%, #090f191a);
}
.hero-content {
  padding-top: 65px;
}
.hero .eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #d1dae5;
  margin-bottom: 24px;
}
.signal-square {
  width: 6px;
  height: 6px;
  background: var(--orange);
}
.hero h1 {
  font-size: clamp(50px, 4.9vw, 68px);
  letter-spacing: -0.04em;
  line-height: 1.14;
  font-weight: 600;
  max-width: 580px;
}
.hero h1 span {
  color: #ff704b;
}
.hero-content > p:not(.eyebrow) {
  font-size: 18px;
  max-width: 460px;
  color: #b9c5d3;
  margin-top: 26px;
  line-height: 1.75;
}
.hero-actions {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-top: 31px;
}
.hero .text-link {
  font-weight: 500;
}
.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-top: 1px solid #c1cdd61c;
  color: #9aabbd;
  font-size: 12px;
  gap: 28px;
}
.hero-bottom > a {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 36px;
}
.hero-bottom > a span {
  font-size: 20px;
}
.hero-media-caption {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-media-caption i {
  color: var(--orange);
  margin: 0 8px;
}
.hero-video-toggle {
  position: absolute;
  bottom: 110px;
  right: 40px;
  background: #101b22d9;
  border: 1px solid #c1cdd655;
  color: white;
  font-size: 12px;
  padding: 10px 15px;
  min-height: 44px;
  z-index: 2;
}
.hero-media video {
  position: absolute;
  inset: 0;
}
.intro-band {
  border-bottom: 1px solid var(--line);
  background: #0b1320;
}
.intro-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding-block: 25px;
}
.intro-band p {
  font-size: 14px;
  line-height: 1.7;
}
.intro-band .container > div {
  display: flex;
  gap: 30px;
  font-size: 14px;
  font-weight: 500;
  color: #bcc8d6;
}
/* Problem → a connected fleet view */
.visibility-section {
  background:
    radial-gradient(ellipse at 50% 50%, #14203166, transparent 65%), var(--ink);
}
.blindspots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 950px;
  margin: 0 auto 38px;
}
.blindspots > div {
  padding: 18px 21px;
  border-left: 1px solid #4b362f;
  background: linear-gradient(90deg, #ff4d2406, transparent);
}
.blindspots span {
  font:
    10px ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  color: #c88e7f;
}
.blindspots p {
  font-size: 16px;
  color: #d5dfe9;
  margin-top: 9px;
}
.fleet-showcase {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--panel-deep);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 70px #00000015;
}
.showcase-controls {
  padding: 29px 26px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.showcase-controls .eyebrow {
  font-size: 10px;
  margin-bottom: 15px;
}
.showcase-controls h3 {
  font-size: 23px;
  line-height: 1.35;
}
.showcase-controls [role="tablist"] {
  margin: 28px 0;
}
.showcase-controls button {
  width: 100%;
  background: none;
  color: var(--muted);
  border: 0;
  border-top: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 16px;
  transition: color 0.25s;
}
.showcase-controls button:last-child {
  border-bottom: 1px solid var(--line);
}
.showcase-controls button > span {
  font:
    12px ui-monospace,
    monospace;
  color: var(--subtle);
}
.showcase-controls button svg {
  margin-left: auto;
  width: 18px;
  opacity: 0;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.showcase-controls button[aria-selected="true"] {
  color: #fff;
  font-weight: 600;
}
.showcase-controls button[aria-selected="true"] > span {
  color: #ff8a68;
}
.showcase-controls button[aria-selected="true"] svg {
  opacity: 1;
  transform: translateX(3px);
  color: #ff8a68;
}
.showcase-controls > p {
  font-size: 12px;
  margin-top: auto;
  line-height: 1.8;
  color: var(--subtle);
}
.showcase-panels {
  min-width: 0;
}
.showcase-visual {
  height: 385px;
  overflow: hidden;
}
.showcase-caption {
  padding: 24px 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--line);
  min-height: 125px;
  background: var(--panel);
}
.showcase-caption h4 {
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.45;
}
.showcase-caption p {
  font-size: 14px;
  margin-top: 7px;
  line-height: 1.7;
}
.showcase-caption > a {
  padding: 11px;
  border: 1px solid #3b4b5e;
  border-radius: 5px;
  transition: background 0.25s;
}
.showcase-caption > a:hover {
  background: var(--orange);
  color: var(--ink);
}
.map-canvas {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 350px;
  background: #0f1c2b;
}
.map-canvas > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-vehicle {
  position: absolute;
  top: 27%;
  left: 45%;
  padding: 12px 15px;
  background: #142538;
  border: 1px solid #354b61;
  box-shadow: 0 4px 20px #0003;
  border-radius: 6px;
  font-size: 12px;
  display: grid;
  grid-template-columns: 8px auto;
  column-gap: 8px;
}
.map-vehicle > span:last-child {
  grid-column: 2;
  font-size: 11px;
  color: #b6c6d5;
}
.status-dot {
  display: inline-block;
  background: #78c1a1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  align-self: center;
}
.map-scale {
  position: absolute;
  bottom: 16px;
  left: 22px;
  font: 11px monospace;
  color: #a7b8c9;
}
.visual-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font:
    10px/1.5 ui-monospace,
    monospace;
  letter-spacing: 0.025em;
  color: #9caec2;
  text-transform: uppercase;
}
.fuel-visual,
.safety-visual,
.temperature-visual,
.workflow-visual {
  background: #101c2b;
  padding: 26px 30px;
  height: 100%;
  min-height: 350px;
  overflow: hidden;
}
.fuel-reading {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-top: 12px;
}
.fuel-reading > strong {
  font-size: 54px;
  letter-spacing: -0.04em;
  line-height: 1.35;
  font-weight: 500;
}
.fuel-reading > strong > span {
  font-size: 24px;
  margin-left: 7px;
}
.fuel-reading p {
  font-size: 13px;
  color: #d4dce6;
  line-height: 1.7;
}
.fuel-reading p span {
  color: #9aabc0;
  font-size: 11px;
}
.fuel-visual > svg {
  height: 145px;
  width: 100%;
  overflow: visible;
}
.chart-times {
  display: flex;
  justify-content: space-between;
  font: 11px monospace;
  color: #9bafc4;
  margin: 9px 0 17px;
}
.event-note {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid #2d3c4f;
  padding-top: 16px;
}
.event-note strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.event-note div > span {
  display: block;
  font-size: 12px;
  color: #aab8c8;
  margin-top: 4px;
  line-height: 1.55;
}
.event-icon {
  width: 24px;
  height: 24px;
  border: 1px solid #654639;
  border-radius: 50%;
  font: 14px monospace;
  display: grid;
  place-items: center;
  color: #ff987b;
  flex-shrink: 0;
}
.camera-scene {
  position: relative;
  margin-top: 21px;
  overflow: hidden;
  height: 196px;
  border-radius: 4px;
}
.camera-scene svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #455e70;
}
.camera-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font: 9px monospace;
  color: white;
  background: #0c1521b3;
  padding: 5px 8px;
}
.event-timeline {
  display: flex;
  gap: 14px;
  align-items: center;
  font: 11px monospace;
  margin: 16px 0;
}
.event-timeline i {
  height: 1px;
  background: #3a4d63;
  flex: 1;
}
.event-timeline strong {
  color: #ff9b7e;
  font-weight: 400;
}
.temp-reading {
  font-size: 76px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.3;
  margin-top: 17px;
}
.temp-reading span {
  font-size: 30px;
}
.temperature-visual > p {
  font-size: 14px;
}
.temp-range {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 19px 0;
  font: 12px monospace;
}
.temp-range i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #28483f, #7ec9a7, #28483f);
}
.temperature-visual > svg {
  height: 110px;
  width: 100%;
}
.workflow-visual {
  padding: 27px 30px;
}
.workflow-step {
  display: flex;
  gap: 23px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.workflow-step span {
  font: 12px monospace;
  color: #93a8bf;
}
.workflow-step strong {
  font-size: 16px;
  font-weight: 500;
}
.workflow-step i {
  margin-left: auto;
  font-style: normal;
  color: #ff9677;
}
.workflow-visual > p {
  font-size: 13px;
  margin-top: 22px;
}
/* A visible technology architecture */
.platform-section {
  background: #0c1421;
  border-block: 1px solid #202c3e;
}
.ecosystem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 38px;
  padding: 34px;
  border: 1px solid #2b384b;
  border-radius: 12px;
  background: linear-gradient(120deg, #13203488, transparent 65%), #0c1523;
  align-items: center;
}
.diagram-label {
  font:
    10px/1.6 ui-monospace,
    monospace;
  letter-spacing: 0.07em;
  color: #9eafc2;
  margin: 0 0 19px;
  display: block;
}
.signal-input,
.signal-output {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #273649;
}
.signal-input > span {
  display: grid;
  place-items: center;
  width: 30px;
  flex-shrink: 0;
  font-size: 25px;
  color: #f29578;
}
.signal-input h3,
.signal-output h3 {
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.signal-input p,
.signal-output p {
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.6;
  color: #9dacc0;
}
.network-label {
  font:
    10px/1.6 ui-monospace,
    monospace;
  color: #b6c6d8;
  margin-top: 24px;
  display: flex;
  gap: 9px;
  align-items: center;
}
.network-label i {
  width: 5px;
  height: 5px;
  background: #78c1a1;
  border-radius: 50%;
}
.ecosystem-core {
  position: relative;
  text-align: center;
  padding: 25px 14px;
  background: #182437;
  border: 1px solid #655049;
  border-radius: 10px;
  box-shadow: 0 8px 40px #0002;
}
.ecosystem-core::before,
.ecosystem-core::after {
  content: "";
  position: absolute;
  width: 39px;
  height: 1px;
  top: 50%;
  background: #a16a52;
}
.ecosystem-core::before {
  right: 100%;
}
.ecosystem-core::after {
  left: 100%;
}
.core-mark {
  width: 72px;
  height: 47px;
  margin: 20px auto;
  background: var(--orange);
  mask: url("/assets/waw-logo-transparant.png") -16px -16px /108px auto
    no-repeat;
}
.ecosystem-core h3 {
  font-size: 22px;
}
.ecosystem-core p {
  font-size: 14px;
  line-height: 1.7;
  margin: 14px 0 23px;
}
.core-intelligence {
  display: block;
  font:
    9px/1.8 ui-monospace,
    monospace;
  letter-spacing: 0.05em;
  border-top: 1px solid #3a4658;
  padding-top: 17px;
  color: #e7aa91;
}
.signal-output > span {
  font: 11px monospace;
  color: #7d95ad;
}
.ecosystem-output .signal-output {
  padding: 13px 0;
}
.ecosystem-output .signal-output:last-child {
  border: 0;
}
.platform-footnote {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding-top: 25px;
  font-size: 13px;
}
.platform-footnote > span {
  color: #8fa4b9;
}
/* Focused solution families, replacing the full-width rows */
.solution-section {
  background: var(--ink);
}
.solution-families {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1040px;
  margin-inline: auto;
}
.solution-family {
  display: flex;
  flex-direction: column;
  border: 1px solid #29364a;
  background: #101a29;
  border-radius: 11px;
  overflow: hidden;
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.4s var(--ease),
    box-shadow 0.3s;
}
.solution-family:hover {
  border-color: #86624f;
  background: #142032;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #0002;
}
.family-visual {
  height: 148px;
  background: linear-gradient(135deg, #172a4099, #101927);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #253448;
}
.family-visual svg {
  position: absolute;
  right: 15px;
  bottom: 0;
  width: 65%;
  height: 130px;
  fill: none;
  stroke: #607b96;
  stroke-width: 1.5;
}
.family-number {
  position: absolute;
  left: 26px;
  top: 25px;
  font:
    10px ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  color: #9eb1c7;
}
.family-visual .mini-grid {
  stroke: #304359;
  opacity: 0.7;
  fill: none;
}
.family-visual .mini-route {
  stroke: #f88965;
  stroke-width: 2;
  fill: none;
}
.family-visual .mini-vehicle {
  fill: #f58a68;
  stroke: #ffd1b7;
}
.family-visual .mini-area {
  fill: #ff774d;
  opacity: 0.06;
  stroke: none;
}
.family-visual .mini-road {
  stroke: #456078;
  stroke-width: 3;
}
.family-visual .mini-core {
  stroke: #b98569;
  fill: #282d36;
}
.family-copy {
  padding: 25px 27px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.family-copy h3 {
  font-size: 23px;
  letter-spacing: -0.025em;
}
.family-copy > p {
  font-size: 17px;
  line-height: 1.75;
  margin-top: 12px;
  max-width: 45ch;
}
.family-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #2b384a;
  margin-top: 23px;
  padding-top: 18px;
}
.family-bottom > span {
  font-size: 12px;
  line-height: 1.8;
  color: #9aacbf;
}
.family-bottom svg {
  width: 19px;
  color: #e5a188;
  transition: transform 0.25s;
}
.solution-family:hover .family-bottom svg {
  transform: translateX(4px);
}
.section-action {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.section-action .text-link {
  color: #ff9a7d;
}
/* Industries, local support, conversion */
.industry-section {
  padding: 75px 0;
  background: #0e1826;
  border-block: 1px solid #233145;
}
.industry-section h2 + p {
  font-size: 17px;
  max-width: 45ch;
}
.industry-list details {
  border-bottom: 1px solid #2b3c50;
}
.industry-list details:first-child {
  border-top: 1px solid #2b3c50;
}
.industry-list summary {
  padding: 21px 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.industry-list summary::-webkit-details-marker {
  display: none;
}
.industry-list summary span {
  font: 22px monospace;
  color: #d7a28b;
  transition: transform 0.3s;
}
.industry-list details[open] summary span {
  transform: rotate(45deg);
}
.industry-list details p {
  padding: 0 25px 24px 0;
  font-size: 16px;
  line-height: 1.8;
}
.support-list article {
  display: flex;
  gap: 23px;
  border: 1px solid #29374a;
  background: #101b2a;
  padding: 24px;
  border-radius: 8px;
  position: relative;
}
.support-list article + article {
  margin-top: 16px;
}
.support-list article + article::before {
  content: "";
  position: absolute;
  top: -17px;
  height: 16px;
  left: 33px;
  width: 1px;
  background: #5e514b;
}
.support-list article > span {
  font: 12px monospace;
  color: #eaa185;
  padding-top: 5px;
}
.support-list h3 {
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.support-list p {
  font-size: 16px;
  margin-top: 10px;
  line-height: 1.75;
}
.support-section .lede {
  font-size: 18px;
}
.conversion {
  padding: 30px 0 70px;
  background: var(--ink);
}
.conversion-grid {
  display: block;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, #71332220, transparent 75%), #111a28;
  border: 1px solid #503c38;
  border-radius: 14px;
  padding: 48px 35px;
  max-width: 1000px;
}
.conversion h2 {
  font-size: 40px;
  letter-spacing: -0.035em;
}
.conversion-grid > div:last-child > p {
  font-size: 18px;
  max-width: 610px;
  margin: 20px auto 26px;
}
.conversion .eyebrow {
  margin-bottom: 16px;
}
.site-footer {
  background: #070c14;
  color: #bdc8d5;
  padding: 55px 0 0;
  border-top: 1px solid #202c3d;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.1fr 0.75fr 0.95fr 1fr;
  gap: 35px;
  padding-bottom: 44px;
}
.footer-main > div > a:not(.brand) {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
  min-height: 28px;
}
.footer-main a:hover {
  color: #ff977b;
}
.footer-main h2 {
  font:
    11px ui-monospace,
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #96a8bd;
  margin: 10px 0 20px;
}
.footer-main p {
  font-size: 14px;
  color: #9bacc0;
  margin: 19px 0;
}
.footer-main .eyebrow {
  font-size: 10px;
  color: #8196ae;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid #263246;
  padding: 20px 0;
  font-size: 11px;
  color: #95a6bd;
}
.footer-bottom > span:nth-child(2) {
  display: flex;
  gap: 25px;
}
/* Secondary pages share the same dark, readable scale */
.page-intro {
  padding: 145px 0 60px;
}
.page-intro h1 {
  font-size: clamp(40px, 4.1vw, 56px);
  max-width: 830px;
  line-height: 1.22;
}
.page-intro .lede {
  max-width: 640px;
  margin-top: 25px;
  font-size: 18px;
}
.category-nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding: 0 0 22px;
  font-size: 14px;
}
.category-nav a {
  padding: 9px 0;
}
.category-nav a:hover {
  color: #ff997b;
}
.directory {
  padding-top: 0;
}
.solution-category {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr;
  gap: 65px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 20px;
}
.solution-category .eyebrow {
  margin-bottom: 14px;
}
.solution-category h2 {
  font-size: 29px;
}
.directory-row {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.directory-row:first-child {
  padding-top: 0;
}
.directory-row:last-child {
  padding-bottom: 0;
  border: 0;
}
.directory-row h3 {
  font-size: 22px;
}
.directory-row p {
  font-size: 17px;
  max-width: 47ch;
  margin-top: 11px;
  line-height: 1.75;
}
.directory-row svg {
  margin-left: auto;
  width: 23px;
  color: #e5a188;
}
.directory-row:hover h3 {
  color: #ff997b;
}
.detail-hero {
  padding: 119px 0 65px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(155deg, #131d2e55, transparent 60%);
}
.breadcrumb {
  font-size: 13px;
  display: inline-flex;
  gap: 18px;
  margin-bottom: 35px;
  color: #bfccda;
}
.breadcrumb span {
  color: #96a9bf;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.detail-hero h1 {
  font-size: clamp(38px, 3.7vw, 51px);
}
.detail-hero .lede {
  font-size: 18px;
  max-width: 43ch;
  margin: 25px 0 27px;
}
.detail-visual {
  height: 445px;
  min-width: 0;
  border: 1px solid #304157;
  overflow: hidden;
  border-radius: 10px;
  background: #111d2c;
}
.detail-visual .map-canvas {
  height: 100%;
}
.detail-visual .fuel-visual > svg {
  height: 177px;
}
.detail-visual .camera-scene {
  height: 240px;
}
.monitor-section {
  background: #0f1928;
  border-block: 1px solid #253247;
}
.monitor-section p {
  font-size: 17px;
  max-width: 42ch;
}
.monitor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
}
.monitor-list li {
  counter-increment: item;
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #2c3a4d;
  font-size: 17px;
}
.monitor-list li:first-child {
  border-top: 1px solid #2c3a4d;
}
.monitor-list li:before {
  content: "0" counter(item);
  font: 12px monospace;
  color: #e39c82;
  padding-top: 7px;
}
.setup-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 36px;
}
.setup-steps li {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.setup-steps span {
  font: 12px monospace;
  color: #e8a087;
}
.setup-steps p {
  font-size: 18px;
  color: #c4cfdd;
  line-height: 1.7;
  margin-top: 20px;
}
.benefits-section {
  background: #0f1928;
  border-block: 1px solid #233146;
}
.benefit-list article + article {
  margin-top: 28px;
  padding-top: 27px;
  border-top: 1px solid #2b394e;
}
.benefit-list h3 {
  font-size: 23px;
}
.benefit-list p {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.8;
}
.related {
  display: flex;
  gap: 35px;
  padding-block: 30px;
  align-items: center;
}
.related .eyebrow {
  margin: 0 auto 0 0;
}
.related .text-link {
  font-size: 14px;
}
.company-image {
  height: 340px;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.company-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  opacity: 0.7;
}
.company-image span {
  position: absolute;
  bottom: 24px;
  left: max(40px, calc((100% - 1120px) / 2));
  color: #ccd7e3;
  font: 12px monospace;
}
.contact-section {
  padding: 145px 0 85px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
}
.contact-grid h1 {
  font-size: clamp(40px, 4.1vw, 56px);
}
.contact-grid h1 span {
  color: #ff8b68;
}
.contact-grid .lede {
  font-size: 18px;
  margin: 25px 0;
  max-width: 43ch;
}
.contact-email {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.contact-email svg {
  width: 19px;
}
.contact-expect {
  margin-top: 40px;
}
.contact-expect h2 {
  font-size: 21px;
  letter-spacing: -0.02em;
}
.contact-expect ol {
  padding-left: 20px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
}
.contact-expect li + li {
  margin-top: 12px;
}
.contact-grid form {
  background: #111c2b;
  padding: 32px;
  border: 1px solid #2a394c;
  border-radius: 10px;
  align-self: start;
}
.contact-grid form h2 {
  font-size: 24px;
}
.contact-grid form > p {
  font-size: 14px;
  margin: 12px 0 26px;
}
.contact-grid label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 22px;
}
.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-grid input,
.contact-grid select,
.contact-grid textarea {
  min-width: 0;
  width: 100%;
  background: #0c1522;
  border: 1px solid #344257;
  border-radius: 5px;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}
.contact-grid textarea {
  resize: vertical;
  line-height: 1.6;
}
.contact-grid textarea::placeholder {
  color: #8295ab;
}
.contact-grid form .button {
  width: 100%;
  margin-top: 5px;
}
.contact-grid form .form-note {
  font-size: 12px;
  margin: 16px 0 0;
  color: #99acc2;
}
.contact-grid form .form-feedback {
  font-size: 14px;
  margin: 14px 0 0;
  color: #8fd1b6;
}
.email-fallback {
  display: inline-flex;
  margin-top: 15px;
  font-size: 13px;
  text-decoration: underline;
}
.error-actions {
  padding-bottom: 80px;
  display: flex;
  gap: 30px;
}
.case-strip {
  padding: 55px 0;
  background: #111d2c;
  border-block: 1px solid #2a394b;
}
.case-strip h2 {
  font-size: 33px;
}
.case-strip h2 + p {
  font-size: 17px;
  margin-top: 20px;
  max-width: 42ch;
}
.fuel-case > .container {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: 50px;
  align-items: start;
}
.fuel-case ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.fuel-case li {
  border-top: 1px solid #624c42;
  padding-top: 20px;
}
.case-strip li > span,
.review-sequence article > span,
.threshold-display > span {
  font:
    10px/1.7 ui-monospace,
    monospace;
  letter-spacing: 0.05em;
  color: #d7a188;
}
.fuel-case h3 {
  font-size: 19px;
  margin: 18px 0 13px;
  line-height: 1.3;
}
.fuel-case li p {
  font-size: 15px;
  line-height: 1.8;
}
.safety-case {
  background: #101b2a;
}
.review-sequence article {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  border-top: 1px solid #2e3d51;
  padding: 18px 0;
}
.review-sequence article > span {
  padding-top: 4px;
}
.review-sequence article p {
  font-size: 17px;
}
.threshold-display > div {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 15px 0;
}
.threshold-display strong {
  font-size: 66px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.threshold-display i {
  font-size: 18px;
  font-style: normal;
  color: #a0b5c7;
}
.threshold-display p {
  font-size: 15px;
  padding-top: 20px;
  border-top: 1px solid #34465a;
}
/* Finite, coordinated motion; everything remains readable without scripting. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].will-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.8s var(--ease),
      transform 0.8s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].will-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .hero-content {
    animation: hero-enter 1s var(--ease) both;
  }
  .in-view .route-track {
    stroke-dasharray: 760;
    animation: route-draw 2.5s var(--ease) both;
  }
  .in-view .chart-line {
    stroke-dasharray: 850;
    animation: chart-draw 1.6s var(--ease) both;
  }
  .in-view .mini-route {
    stroke-dasharray: 420;
    animation: mini-draw 1.8s var(--ease) both;
  }
  .ecosystem.in-view .ecosystem-core::before,
  .ecosystem.in-view .ecosystem-core::after {
    transform-origin: left;
    animation: connect-line 1.4s var(--ease) both;
  }
  .ecosystem.in-view .ecosystem-core::after {
    animation-delay: 0.35s;
  }
  [role="tabpanel"]:not([hidden]) {
    animation: panel-enter 0.5s var(--ease);
  }
  .industry-list details[open] p {
    animation: panel-enter 0.35s var(--ease);
  }
  @keyframes hero-enter {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes route-draw {
    from {
      stroke-dashoffset: 760;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes chart-draw {
    from {
      stroke-dashoffset: 850;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes mini-draw {
    from {
      stroke-dashoffset: 420;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes connect-line {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
  @keyframes panel-enter {
    from {
      opacity: 0.3;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (max-width: 1100px) {
  .container {
    width: calc(100% - 64px);
  }
  #primary-nav {
    gap: 22px;
  }
  #primary-nav > .portal-link {
    margin-left: 0;
  }
  .split {
    gap: 45px;
  }
  .section-heading {
    gap: 45px;
  }
  .section-heading-centered {
    display: block;
  }
  .footer-main {
    gap: 25px;
  }
  .contact-grid {
    gap: 40px;
  }
  .contact-grid form {
    padding: 25px;
  }
  .detail-grid {
    gap: 35px;
  }
  .ecosystem {
    gap: 26px;
    padding: 26px;
  }
  .ecosystem-core::before,
  .ecosystem-core::after {
    width: 27px;
  }
  .ecosystem-core {
    padding-inline: 10px;
  }
  .signal-input {
    gap: 9px;
  }
  .signal-input p,
  .signal-output p {
    font-size: 12px;
  }
  .diagram-label {
    font-size: 9px;
  }
  .fuel-case > .container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero h1 {
    font-size: 60px;
  }
}
@media (max-width: 900px) {
  .container {
    width: calc(100% - 48px);
  }
  .section {
    padding: 65px 0;
  }
  .nav-wrap {
    height: 74px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    color: inherit;
    padding: 10px;
    z-index: 32;
  }
  .menu-toggle span {
    height: 1px;
    width: 24px;
    background: currentColor;
    transition: transform 0.25s var(--ease);
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  #primary-nav {
    display: none;
    position: fixed;
    inset: 74px 0 0;
    height: calc(100dvh - 74px);
    background: #0b1320;
    color: #fff;
    overflow: auto;
    padding: 33px 35px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #primary-nav.is-open {
    display: flex;
    animation: panel-enter 0.3s var(--ease);
  }
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open .site-header {
    background: #0b1320;
    backdrop-filter: none;
  }
  #primary-nav > a:not(.button) {
    font-size: 28px;
    line-height: 1.4;
    min-height: 68px;
    padding: 14px 0;
    border-bottom: 1px solid #28374a;
    letter-spacing: -0.025em;
  }
  .mobile-nav-label {
    display: block;
    color: #a0b4cc;
    font-size: 11px;
    margin: 0 0 15px;
  }
  .mobile-nav-note {
    display: block;
    font-size: 15px;
    line-height: 1.8;
    color: #9aaec5;
    margin-top: 32px;
  }
  #primary-nav > a.portal-link {
    margin: 20px 0 12px;
    font-size: 16px;
    min-height: 44px;
    line-height: 1.6;
    border: 0;
    letter-spacing: 0;
  }
  #primary-nav .button {
    max-width: 360px;
    font-size: 15px;
    min-height: 52px;
  }
  .hero {
    height: 740px;
    min-height: 700px;
  }
  .hero-content {
    padding-top: 20px;
  }
  .hero h1 {
    font-size: 58px;
  }
  .hero-media img {
    object-position: 63% center;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #090f19, #090f19c9 43%, #090f1944),
      linear-gradient(0deg, #090f19ed, transparent 40%);
  }
  .hero-bottom {
    font-size: 11px;
  }
  .hero-media-caption {
    display: none;
  }
  .intro-band .container {
    padding-block: 23px;
    gap: 28px;
  }
  .intro-band .container > div {
    gap: 22px;
    font-size: 12px;
  }
  .intro-band p {
    font-size: 13px;
  }
  .section-heading:not(.section-heading-centered) {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .section-heading > p:not(.eyebrow),
  .section-heading > div > p:not(.eyebrow) {
    max-width: 55ch;
  }
  .section-heading-centered > p:not(.eyebrow) {
    font-size: 17px;
  }
  .blindspots {
    gap: 12px;
    margin-bottom: 30px;
  }
  .blindspots > div {
    padding: 14px;
  }
  .blindspots span {
    font-size: 9px;
  }
  .blindspots p {
    font-size: 15px;
  }
  .fleet-showcase {
    grid-template-columns: 215px 1fr;
  }
  .showcase-controls {
    padding: 24px 19px;
  }
  .showcase-controls h3 {
    font-size: 21px;
  }
  .showcase-controls button {
    font-size: 15px;
    gap: 13px;
  }
  .showcase-controls > p {
    font-size: 11px;
  }
  .showcase-visual {
    height: 390px;
  }
  .showcase-caption {
    padding: 22px;
    min-height: 151px;
  }
  .showcase-caption h4 {
    font-size: 16px;
  }
  .showcase-caption p {
    font-size: 13px;
  }
  .fuel-visual,
  .safety-visual,
  .temperature-visual,
  .workflow-visual {
    padding: 24px;
  }
  .fuel-visual > svg {
    height: 137px;
  }
  .camera-scene {
    height: 175px;
  }
  .event-note div > span {
    font-size: 11px;
  }
  .fuel-reading {
    gap: 17px;
  }
  .fuel-reading p span {
    font-size: 10px;
  }
  .visual-topline {
    font-size: 9px;
  }
  .ecosystem {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin: auto;
    gap: 28px;
    padding: 28px;
  }
  .ecosystem-core {
    margin: 0 30px;
    padding: 24px;
  }
  .ecosystem-core::before,
  .ecosystem-core::after {
    width: 1px;
    height: 29px;
    left: 50%;
    top: auto;
  }
  .ecosystem-core::before {
    bottom: 100%;
  }
  .ecosystem-core::after {
    top: 100%;
  }
  .ecosystem-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .ecosystem-input > .diagram-label,
  .ecosystem-input > .network-label {
    grid-column: 1/-1;
  }
  .ecosystem-input > .diagram-label {
    text-align: center;
    font-size: 10px;
  }
  .ecosystem-input > .network-label {
    justify-content: center;
    margin-top: 20px;
  }
  .signal-input {
    align-items: start;
    gap: 10px;
    padding: 13px 0;
  }
  .signal-input > span {
    font-size: 22px;
    width: 24px;
  }
  .ecosystem-output > .diagram-label {
    text-align: center;
    font-size: 10px;
  }
  .ecosystem-output {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .signal-output {
    justify-content: flex-start;
  }
  .signal-output h3,
  .signal-input h3 {
    font-size: 17px;
  }
  .signal-output p,
  .signal-input p {
    font-size: 13px;
  }
  .ecosystem-core .diagram-label {
    font-size: 10px;
  }
  .ecosystem-core h3 {
    font-size: 25px;
  }
  .ecosystem-core p {
    font-size: 16px;
  }
  .ecosystem-core .core-intelligence {
    font-size: 10px;
  }
  .ecosystem.in-view .ecosystem-core::before,
  .ecosystem.in-view .ecosystem-core::after {
    animation: none;
  }
  .family-copy {
    padding: 23px;
  }
  .family-copy h3 {
    font-size: 22px;
  }
  .family-copy > p {
    font-size: 16px;
  }
  .family-visual {
    height: 130px;
  }
  .family-visual svg {
    width: 75%;
    height: 115px;
    right: 0;
  }
  .family-number {
    left: 22px;
    top: 17px;
    font-size: 9px;
  }
  .family-bottom > span {
    font-size: 11px;
  }
  .solution-families {
    gap: 20px;
  }
  .split {
    gap: 34px;
  }
  .industry-list summary {
    font-size: 16px;
  }
  .industry-list details p {
    font-size: 15px;
  }
  .support-list article {
    padding: 20px;
    gap: 16px;
  }
  .support-list h3 {
    font-size: 18px;
  }
  .support-list p {
    font-size: 15px;
  }
  .support-section .lede {
    font-size: 17px;
  }
  .conversion h2 {
    font-size: 36px;
  }
  .conversion-grid {
    padding: 40px 30px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 55px;
  }
  .footer-main > div:first-child {
    grid-row: span 2;
  }
  .footer-main > div:last-child {
    grid-column: 2;
  }
  .page-intro {
    padding: 125px 0 50px;
  }
  .page-intro h1 {
    font-size: 46px;
  }
  .solution-category {
    grid-template-columns: 0.7fr 1.5fr;
    gap: 35px;
  }
  .directory-row p {
    font-size: 16px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .detail-hero {
    padding: 109px 0 55px;
  }
  .detail-hero h1 {
    font-size: 48px;
  }
  .detail-hero .lede {
    max-width: 590px;
  }
  .detail-visual {
    height: 425px;
    max-width: 650px;
    width: 100%;
  }
  .detail-visual .camera-scene {
    height: 218px;
  }
  .detail-visual .fuel-visual > svg {
    height: 170px;
  }
  .setup-steps {
    gap: 28px;
  }
  .large-copy {
    font-size: 18px;
  }
  .related {
    gap: 25px;
    flex-wrap: wrap;
  }
  .related .eyebrow {
    width: 100%;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .contact-section {
    padding: 125px 0 60px;
  }
  .contact-grid h1 {
    font-size: 48px;
  }
  .contact-grid h1 br:nth-child(2) {
    display: none;
  }
  .contact-expect {
    margin-top: 30px;
  }
  .contact-grid form {
    max-width: 650px;
    width: 100%;
    padding: 32px;
  }
  .company-image {
    height: 300px;
  }
  .company-image span {
    left: 24px;
    font-size: 11px;
  }
  .case-strip .split {
    gap: 35px;
  }
}
@media (max-width: 600px) {
  .container {
    width: calc(100% - 40px);
  }
  body {
    font-size: 16px;
  }
  .section {
    padding: 54px 0;
  }
  h2 {
    font-size: 30px;
    line-height: 1.25;
  }
  h3 {
    font-size: 22px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 16px;
  }
  .brand {
    gap: 7px;
  }
  .wordmark-text {
    font-size: 11px;
  }
  .brand-mark {
    width: 43px;
    flex-basis: 43px;
  }
  .nav-wrap {
    height: 70px;
  }
  #primary-nav {
    top: 70px;
    height: calc(100dvh - 70px);
    padding: 27px 24px;
  }
  .hero {
    height: 770px;
    min-height: 730px;
    max-height: 850px;
    align-items: flex-start;
  }
  .hero-content {
    padding-top: 132px;
  }
  .hero .eyebrow {
    font-size: 9px;
    margin-bottom: 22px;
  }
  .hero h1 {
    font-size: clamp(43px, 11.8vw, 53px);
    line-height: 1.18;
    letter-spacing: -0.035em;
  }
  .hero-content > p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.8;
    max-width: 340px;
    margin-top: 23px;
  }
  .desktop-break {
    display: none;
  }
  .hero-actions {
    gap: 18px;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 24px;
  }
  .hero-actions .button {
    min-height: 50px;
    font-size: 14px;
    padding: 12px 19px;
    gap: 30px;
  }
  .hero-actions .text-link {
    font-size: 14px;
    min-height: 38px;
  }
  .hero-media img {
    object-fit: cover;
    object-position: 66% 100%;
    width: 100%;
    height: 68%;
    position: absolute;
    bottom: 15px;
  }
  .hero-media video {
    inset: auto 0 15px;
    height: 68%;
    object-position: 66% 100%;
  }
  .hero-shade {
    background:
      linear-gradient(
        180deg,
        #090f19 5%,
        #090f19 21%,
        #090f19e8 40%,
        #090f1966 66%,
        #090f194d 81%,
        #090f19 100%
      ),
      linear-gradient(90deg, #090f1977, transparent);
  }
  .hero-bottom {
    padding: 15px 0;
    align-items: center;
    font-size: 10px;
    gap: 15px;
  }
  .hero-bottom > span {
    max-width: 155px;
    line-height: 1.7;
  }
  .hero-bottom > a {
    gap: 10px;
    font-size: 10px;
    white-space: nowrap;
  }
  .hero-video-toggle {
    right: 20px;
    bottom: 90px;
  }
  .intro-band .container {
    display: block;
    padding-block: 22px;
  }
  .intro-band p {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .intro-band p br {
    display: none;
  }
  .intro-band .container > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 21px;
    font-size: 12px;
  }
  .section-heading {
    display: block;
    margin-bottom: 30px;
  }
  .section-heading > p:not(.eyebrow),
  .section-heading > div + div {
    margin-top: 21px;
  }
  .section-heading > p:not(.eyebrow),
  .section-heading > div > p:not(.eyebrow) {
    max-width: 100%;
    font-size: 17px;
  }
  .section-heading-centered {
    text-align: center;
  }
  .section-heading-centered .eyebrow {
    font-size: 9px;
    gap: 9px;
  }
  .section-heading-centered .eyebrow::before,
  .section-heading-centered .eyebrow::after {
    width: 15px;
  }
  .section-heading-centered > p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 17px;
  }
  .blindspots {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 27px;
  }
  .blindspots > div {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 14px;
    background: none;
    border-left: 1px solid #7b4d3f;
    border-bottom: 1px solid #243144;
  }
  .blindspots span {
    font-size: 8px;
    flex: 0 0 94px;
  }
  .blindspots p {
    font-size: 14px;
    margin: 0;
  }
  .fleet-showcase {
    display: block;
    border-radius: 9px;
  }
  .showcase-controls {
    padding: 22px 20px 0;
    border: 0;
  }
  .showcase-controls > div:first-child {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
  }
  .showcase-controls h3 {
    font-size: 20px;
  }
  .showcase-controls .eyebrow {
    font-size: 9px;
    max-width: 90px;
    line-height: 1.8;
    margin: 0;
  }
  .showcase-controls [role="tablist"] {
    display: flex;
    margin: 23px -20px 0;
  }
  .showcase-controls button {
    justify-content: center;
    border-bottom: 0 !important;
    gap: 8px;
    padding: 16px 4px;
    font-size: 14px;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .showcase-controls button:last-child {
    border-right: 0;
  }
  .showcase-controls button > span {
    font-size: 10px;
  }
  .showcase-controls button svg {
    display: none;
  }
  .showcase-controls button[aria-selected="true"] {
    background: #152335;
    border-top: 2px solid var(--orange);
    padding-top: 15px;
  }
  .showcase-controls > p {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
    padding: 11px 0;
    color: #94a8bf;
  }
  .showcase-controls > p br {
    display: none;
  }
  .showcase-visual {
    height: 355px;
  }
  .map-canvas {
    min-height: 355px;
  }
  .map-canvas > svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .map-vehicle {
    left: 36%;
    top: 28%;
    font-size: 11px;
    padding: 9px 11px;
  }
  .map-vehicle > span:last-child {
    font-size: 10px;
  }
  .showcase-caption {
    padding: 19px 17px;
    gap: 13px;
    min-height: 140px;
  }
  .showcase-caption h4 {
    font-size: 16px;
  }
  .showcase-caption p {
    font-size: 13px;
    line-height: 1.75;
  }
  .showcase-caption > a {
    padding: 10px;
  }
  .showcase-caption > a svg {
    width: 18px;
  }
  .fuel-visual,
  .safety-visual,
  .temperature-visual,
  .workflow-visual {
    padding: 20px;
    min-height: 355px;
  }
  .visual-topline {
    font-size: 9px;
    gap: 14px;
    line-height: 1.6;
  }
  .fuel-reading > strong {
    font-size: 49px;
  }
  .fuel-reading {
    gap: 17px;
    margin-top: 15px;
  }
  .fuel-reading p {
    font-size: 11px;
  }
  .fuel-reading p span {
    font-size: 10px;
  }
  .fuel-visual > svg {
    height: 115px;
    margin-top: 8px;
  }
  .chart-times {
    font-size: 10px;
    margin-bottom: 16px;
  }
  .event-note {
    gap: 11px;
    padding-top: 13px;
  }
  .event-note strong {
    font-size: 12px;
  }
  .event-note div > span {
    font-size: 11px;
    line-height: 1.6;
  }
  .event-icon {
    width: 21px;
    height: 21px;
    font-size: 13px;
  }
  .camera-scene {
    height: 170px;
    margin-top: 17px;
  }
  .camera-label {
    font-size: 7px;
  }
  .event-timeline {
    font-size: 9px;
    gap: 8px;
    margin: 17px 0;
  }
  .ecosystem {
    padding: 23px 20px;
    gap: 26px;
    border-radius: 9px;
  }
  .ecosystem-input {
    gap: 0 20px;
  }
  .signal-input {
    display: block;
    padding: 8px 0 14px;
  }
  .signal-input > span {
    margin-bottom: 10px;
  }
  .signal-input h3 {
    font-size: 16px;
  }
  .signal-input p {
    font-size: 12px;
    line-height: 1.7;
  }
  .ecosystem-core {
    margin: 0;
    padding: 24px 17px;
  }
  .ecosystem-core h3 {
    font-size: 24px;
  }
  .ecosystem-core p {
    font-size: 16px;
  }
  .signal-output h3 {
    font-size: 17px;
  }
  .signal-output p {
    font-size: 13px;
  }
  .core-intelligence {
    font-size: 9px !important;
  }
  .platform-footnote {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 21px;
    font-size: 12px;
  }
  .platform-footnote .text-link {
    font-size: 14px;
  }
  .solution-families {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .family-visual {
    height: 116px;
  }
  .family-visual svg {
    height: 112px;
    width: 70%;
    right: 0;
  }
  .family-number {
    left: 23px;
    top: 18px;
    font-size: 9px;
  }
  .family-copy {
    padding: 23px;
  }
  .family-copy h3 {
    font-size: 23px;
  }
  .family-copy > p {
    font-size: 16px;
    line-height: 1.8;
    max-width: 40ch;
  }
  .family-bottom {
    margin-top: 20px;
    padding-top: 16px;
    gap: 15px;
  }
  .family-bottom > span {
    font-size: 12px;
  }
  .section-action {
    margin-top: 24px;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 31px;
  }
  .industry-section {
    padding: 51px 0;
  }
  .industry-section h2 + p {
    font-size: 17px;
  }
  .industry-list summary {
    font-size: 17px;
    padding: 20px 0;
  }
  .industry-list details p {
    font-size: 16px;
  }
  .support-section .lede {
    font-size: 17px;
  }
  .support-list article {
    padding: 21px 18px;
    gap: 17px;
  }
  .support-list h3 {
    font-size: 19px;
  }
  .support-list p {
    font-size: 16px;
  }
  .support-list article + article::before {
    left: 27px;
  }
  .conversion {
    padding: 10px 0 50px;
  }
  .conversion-grid {
    padding: 34px 23px;
  }
  .conversion h2 {
    font-size: 31px;
  }
  .conversion-grid > div:last-child > p {
    font-size: 16px;
    margin-top: 19px;
    margin-bottom: 22px;
  }
  .conversion .button {
    font-size: 14px;
    width: 100%;
    gap: 15px;
  }
  .conversion .eyebrow {
    font-size: 9px;
  }
  .site-footer {
    padding-top: 38px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 27px 20px;
    padding-bottom: 28px;
  }
  .footer-main > div:first-child {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .footer-main > div:last-child {
    grid-column: 1/-1;
  }
  .footer-main p {
    font-size: 14px;
    margin: 13px 0;
  }
  .footer-main .eyebrow {
    font-size: 9px;
  }
  .footer-main h2 {
    font-size: 11px;
    margin-bottom: 17px;
  }
  .footer-main > div > a:not(.brand) {
    font-size: 13px;
    min-height: 32px;
    margin-bottom: 5px;
  }
  .footer-bottom {
    flex-wrap: wrap;
    font-size: 10px;
    gap: 15px;
    padding-block: 20px;
  }
  .footer-bottom > span:nth-child(2) {
    gap: 18px;
  }
  .footer-bottom > a {
    margin-left: auto;
  }
  .page-intro {
    padding: 112px 0 40px;
  }
  .page-intro h1 {
    font-size: 38px;
    line-height: 1.25;
  }
  .page-intro .lede {
    font-size: 17px;
    margin-top: 23px;
  }
  .category-nav {
    gap: 7px 20px;
    font-size: 13px;
    padding-bottom: 17px;
  }
  .solution-category {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 34px 0;
  }
  .solution-category > div:first-child {
    display: flex;
    gap: 17px;
    align-items: center;
  }
  .solution-category .eyebrow {
    margin: 0;
  }
  .solution-category h2 {
    font-size: 26px;
  }
  .directory-row {
    padding: 23px 0;
    gap: 20px;
  }
  .directory-row h3 {
    font-size: 22px;
  }
  .directory-row p {
    font-size: 16px;
  }
  .detail-hero {
    padding: 103px 0 42px;
  }
  .breadcrumb {
    font-size: 11px;
    margin-bottom: 29px;
    gap: 15px;
  }
  .detail-hero h1 {
    font-size: clamp(34px, 9.4vw, 42px);
  }
  .detail-hero .lede {
    font-size: 17px;
    margin: 22px 0 25px;
  }
  .detail-grid {
    gap: 32px;
  }
  .detail-visual {
    height: 392px;
  }
  .detail-visual .fuel-visual > svg {
    height: 148px;
  }
  .detail-visual .camera-scene {
    height: 203px;
  }
  .detail-visual .map-canvas {
    min-height: 392px;
  }
  .large-copy {
    font-size: 17px;
  }
  .monitor-section p {
    font-size: 17px;
  }
  .monitor-list li {
    font-size: 16px;
    padding: 18px 0;
    gap: 20px;
  }
  .setup-steps {
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .setup-steps li {
    display: flex;
    gap: 23px;
    padding-top: 20px;
  }
  .setup-steps span {
    padding-top: 5px;
  }
  .setup-steps p {
    font-size: 17px;
    margin: 0;
  }
  .benefit-list h3 {
    font-size: 22px;
  }
  .benefit-list p {
    font-size: 17px;
  }
  .related {
    flex-wrap: wrap;
    gap: 14px 25px;
    padding-block: 28px;
  }
  .related .eyebrow {
    width: 100%;
  }
  .related .text-link {
    font-size: 14px;
  }
  .workflow-step {
    padding: 24px 0;
    gap: 17px;
  }
  .workflow-step strong {
    font-size: 15px;
  }
  .workflow-visual > p {
    font-size: 12px;
    margin-top: 19px;
  }
  .temp-reading {
    font-size: 67px;
  }
  .temperature-visual > svg {
    height: 94px;
  }
  .temperature-visual .temp-range {
    margin: 15px 0;
  }
  .contact-section {
    padding: 111px 0 51px;
  }
  .contact-grid h1 {
    font-size: 40px;
  }
  .contact-grid h1 br:nth-child(2) {
    display: block;
  }
  .contact-grid .lede {
    font-size: 17px;
    margin: 22px 0;
  }
  .contact-email {
    font-size: 14px;
    gap: 14px;
  }
  .contact-expect {
    margin-top: 29px;
  }
  .contact-expect h2 {
    font-size: 21px;
  }
  .contact-expect ol {
    font-size: 16px;
  }
  .contact-grid {
    gap: 34px;
  }
  .contact-grid form {
    padding: 25px 20px;
  }
  .contact-grid form h2 {
    font-size: 23px;
  }
  .form-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-grid form > p {
    font-size: 14px;
  }
  .company-image {
    height: 245px;
  }
  .company-image img {
    object-position: 67% 60%;
  }
  .company-image span {
    font-size: 10px;
    left: 20px;
    right: 20px;
  }
  .error-actions {
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }
  .case-strip {
    padding: 42px 0;
  }
  .case-strip h2 {
    font-size: 29px;
  }
  .fuel-case ol {
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .fuel-case li {
    display: grid;
    grid-template-columns: 87px 1fr;
    gap: 10px 18px;
    padding-top: 18px;
  }
  .fuel-case h3 {
    margin: 0;
    font-size: 19px;
  }
  .fuel-case li > span {
    padding-top: 5px;
    font-size: 9px;
  }
  .fuel-case li p {
    grid-column: 2;
    font-size: 16px;
  }
  .review-sequence article {
    grid-template-columns: 75px 1fr;
    gap: 18px;
  }
  .review-sequence article p {
    font-size: 16px;
  }
  .threshold-display strong {
    font-size: 61px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .route-track,
  .chart-line,
  .mini-route {
    stroke-dashoffset: 0 !important;
  }
}
/* Telemetry panels grow with readable copy instead of cropping on small screens. */
.detail-visual:has(.workflow-visual) {
  height: auto;
  min-height: 425px;
}
.detail-visual .workflow-visual {
  height: auto;
  min-height: 425px;
}
@media (max-width: 600px) {
  .detail-visual:has(.fuel-visual),
  .detail-visual:has(.safety-visual),
  .detail-visual:has(.temperature-visual) {
    height: auto;
  }
  .detail-visual > .fuel-visual,
  .detail-visual > .safety-visual,
  .detail-visual > .temperature-visual {
    height: auto;
  }
  .showcase-visual {
    height: auto;
    min-height: 355px;
  }
  .showcase-visual > .fuel-visual,
  .showcase-visual > .safety-visual,
  .showcase-visual > .temperature-visual {
    height: auto;
  }
}

/* Typography pairing verified against Agentic Mastery. */
h1,
h2,
h3,
h4,
.button,
.brand,
.text-link {
  font-family: "Space Grotesk", Inter, sans-serif;
}
h1,
h2,
.hero h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
h3,
h4 {
  font-weight: 600;
  letter-spacing: 0;
}
.button {
  font-weight: 600;
}

/* A stronger reading weight, with the established type scale and section grids. */
body { font-weight: 500; }
.site-header { transition: background .35s, border-color .35s; }
.site-header .brand { position: relative; width: 180px; height: 42px; }
.site-header .wordmark-text { color: #fff; font-size: 22px; font-weight: 500; letter-spacing: .035em; transition: opacity .3s, transform .3s; }
.site-header .brand-mark { position: absolute; left: 0; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.site-header.is-scrolled { background: #090f19; backdrop-filter: blur(14px); border-color: var(--line); }
.site-header.is-scrolled .wordmark-text { opacity: 0; transform: translateY(-8px); }
.site-header.is-scrolled .brand-mark { opacity: 1; transform: translateY(0); }
body.menu-open .site-header { background: var(--ink); }
.showcase-visual:has(.fleet-demo) { height: auto; min-height: 0; }
.fleet-demo { background: #101c2b; }
.demo-heading, .demo-feed-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.demo-heading { padding:17px 24px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.07em; }
.demo-heading .status-dot { margin-right:8px; }
.demo-heading button { color:#d7e2ed; background:transparent; border:1px solid #42536a; border-radius:5px; padding:7px 9px; font:500 11px Inter,sans-serif; cursor:pointer; white-space:nowrap; }
.demo-heading button:hover { border-color:#ff7856; }
.demo-scene { height:285px; overflow:hidden; }
.demo-scene .map-canvas { min-height:0; height:285px; }
.demo-scene .map-canvas>svg { height:100%; transform:none; }
.demo-scene .map-vehicle { top:19%; left:44%; }
.demo-scene .fuel-visual, .demo-scene .safety-visual { min-height:0; height:100%; padding:17px 24px; }
.demo-scene .fuel-reading { margin-top:4px; }
.demo-scene .fuel-reading>strong { font-size:38px; }
.demo-scene .fuel-visual>svg { height:83px; }
.demo-scene .chart-times { margin:3px 0 9px; }
.demo-scene .event-note { padding-top:9px; }
.demo-scene .camera-scene { height:clamp(220px, 26vw, 330px); margin-top:12px; background:#4f6767; }
.demo-scene .camera-scene svg { background:#4f6767; }
.demo-scene .event-timeline { margin:10px 0; }
.camera-speed { position:absolute; right:12px; top:10px; background:#09121dd9; padding:6px 9px; font-size:12px; z-index:1; }
.demo-feed { padding:14px 24px 10px; border-top:1px solid var(--line); background:#0d1826; }
.demo-feed-label { font-size:10px; letter-spacing:.09em; color:#99abc0; margin-bottom:5px; }
.demo-event { display:grid; grid-template-columns:45px 65px 1fr; gap:10px; padding:9px 0; border-top:1px solid #ffffff08; font-size:12px; align-items:baseline; }
.demo-event time { color:#8fa4bd; font-size:11px; font-variant-numeric:tabular-nums; }
.demo-event strong { color:#e6edf5; font-weight:650; }
.demo-event span { color:#bccbdb; }
.demo-event:first-child span { color:#8cdbc0; }
.fleet-demo[data-running="true"] .demo-event:first-child { animation:event-arrive .6s ease-out; }
.fleet-demo .route-track { stroke-dasharray:8 6; }
.fleet-demo[data-running="true"] .route-track { animation:route-flow 1.6s linear infinite; }
.fleet-demo[data-running="true"] .demo-vehicle-halo { animation:signal-breathe 2s ease-in-out infinite; transform-origin:425px 218px; }
/* Road movement and braking cues share the replay's current event phase. */
.fleet-demo .camera-scene svg path[stroke-dasharray] { animation:road-flow var(--road-duration, 1s) linear infinite; animation-play-state:paused; }
.fleet-demo[data-running="true"] .camera-scene svg path[stroke-dasharray] { animation-play-state:running; }
.fleet-demo .camera-scene svg path[stroke="#f0c092"] { opacity:0; }
.fleet-demo .camera-scene svg path[stroke="#ff4d24"] { opacity:.25; }
.fleet-demo[data-braking="true"] .camera-scene svg path[stroke="#f0c092"] { opacity:1; stroke:#ff7856; }
.fleet-demo[data-braking="true"] .camera-scene svg path[stroke="#ff4d24"] { opacity:1; filter:drop-shadow(0 0 5px #ff4d24); }
.fleet-demo[data-braking="true"] .camera-speed { color:#ff9b7e; }
.fleet-demo .event-timeline strong { text-align:center; }
.fleet-demo[data-running="true"] .fuel-visual .chart-line { animation:fuel-trace 6s ease-in-out infinite; stroke-dasharray:900; }
@keyframes event-arrive { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes route-flow { to { stroke-dashoffset:-28; } }
@keyframes road-flow { to { stroke-dashoffset:-50; } }
@keyframes signal-breathe { 50% { transform:scale(1.6); opacity:.4; } }
@keyframes fuel-trace { 0% { stroke-dashoffset:900; } 45%,100% { stroke-dashoffset:0; } }
@media(max-width:600px) {
 .site-header .wordmark-text { font-size:20px; }
 .site-header .brand { width:155px; }
 .demo-heading,.demo-feed { padding-left:16px; padding-right:16px; }
 .demo-heading { font-size:9px; }
 .demo-scene { height:310px; }
 .demo-scene .map-canvas { height:310px; }
 .demo-scene .fuel-visual,.demo-scene .safety-visual { padding:16px; }
 .demo-scene .map-vehicle { left:37%; }
 .demo-event { gap:7px; grid-template-columns:38px 54px 1fr; font-size:11px; }
 .demo-event time { font-size:10px; }
 .camera-label { font-size:7px; left:5px; }
}
@media(prefers-reduced-motion:reduce) {
 .fleet-demo *, .site-header, .site-header .brand-mark, .site-header .wordmark-text { animation:none!important; transition:none!important; }
}
.demo-event { font-size:14px; }
.demo-event time { font-size:12px; }
.demo-scene .event-note strong { font-size:14px; }
.demo-scene .event-note div>span { font-size:13px; }
.demo-vehicle-dot,.demo-vehicle-halo { transition: none; }
.demo-scene:has(.safety-visual) { height:auto; min-height:285px; }
.demo-scene .safety-visual { height:auto; min-height:285px; }
@media(max-width:600px) {
 .demo-event { font-size:12px; }
 .demo-scene:has(.safety-visual),.demo-scene .safety-visual { min-height:310px; }
}

.fleet-stats { padding:32px 0; background:#0b1522; border-bottom:1px solid var(--line); }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.stat-card { padding:28px 20px; text-align:center; border:1px solid #2a384b; border-radius:10px; background:linear-gradient(145deg,#142132,#0e1826); }
.stat-value { display:flex; justify-content:center; align-items:baseline; color:var(--text); font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(34px,3.4vw,46px); line-height:1.15; font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.stat-value>span:last-child { color:#ff7856; }
.stat-card h2 { margin-top:12px; font-family:Inter,sans-serif; font-size:16px; line-height:1.5; letter-spacing:0; font-weight:500; color:#bfccda; }
@media(max-width:600px) {
 .fleet-stats { padding:24px 0; }
 .stats-grid { grid-template-columns:1fr; gap:12px; }
 .stat-card { padding:22px 18px; }
 .stat-value { font-size:38px; }
 .stat-card h2 { margin-top:8px; }
}

/* WAW's compact fleet pulse lives beside the hero copy. */
.hero-content { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:48px; }
.hero-copy { min-width:0; }
.hero-copy>p { max-width:510px; }
.hero-feed { border:1px solid #536078; border-radius:16px; background:linear-gradient(140deg,#17283beb,#101b2af5); box-shadow:0 25px 70px #0005; overflow:hidden; min-width:0; margin-top:28px; }
.hero-feed-heading { padding:20px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff16; gap:10px; font-size:10px; color:#91a7bf; letter-spacing:.1em; }
.feed-brand { color:#edf4fa; font-size:13px; font-weight:700; letter-spacing:.04em; }
.feed-brand .status-dot { margin-right:8px; box-shadow:0 0 14px #5fd5a9; }
.hero-feed-metrics { display:grid; grid-template-columns:repeat(3,1fr); padding:20px 12px; }
.hero-feed-metrics>div { padding:0 12px; border-right:1px solid #ffffff18; }
.hero-feed-metrics>div:last-child { border:0; }
.hero-feed-metrics strong { display:block; font:700 30px "Space Grotesk",sans-serif; color:#f4f7fa; }
.hero-feed-metrics strong span { font-size:20px; color:#7692ab; }
.hero-feed-metrics>div>span { font-size:11px; color:#aebed0; }
.hero-route { display:flex; align-items:center; gap:12px; padding:5px 24px 20px; color:#bbcad9; font-size:11px; }
.hero-route i { position:relative; height:1px; background:#567184; flex:1; }
.hero-route i:before,.hero-route i:after { content:""; position:absolute; top:-3px; width:7px; height:7px; border-radius:50%; background:#ff704b; }
.hero-route i:after { right:0; background:#79cbaa; }
.hero-feed .demo-feed { background:#09131d55; padding:15px 22px; }
.hero-feed .demo-event { grid-template-columns:37px 85px 1fr; font-size:12px; gap:9px; padding:12px 0; }
.demo-event strong,.map-vehicle strong { font-family:Inter,sans-serif; letter-spacing:.025em; white-space:nowrap; }
.hero-feed .demo-event strong { display:inline-block; padding:3px 5px; border:1px solid #bfc9ce; border-radius:3px; color:#19222a; background:#e7e9dd; font-size:11px; box-shadow:inset 0 0 0 2px #c3c8c2; text-align:center; }
.hero-feed-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:13px 22px; color:#91a8bd; font-size:10px; }
.hero-feed-footer button { background:transparent; border:1px solid #495b70; border-radius:4px; color:#dde7ef; padding:6px 9px; font:500 10px Inter,sans-serif; cursor:pointer; }
.hero-feed[data-running="true"] .hero-route i:before { animation:pulse-route 6s linear infinite; }
@keyframes pulse-route { to { left:calc(100% - 7px); } from { left:0; } }
.demo-event { grid-template-columns:45px 83px 1fr; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.product-grid p { margin-top:20px; max-width:52ch; }
.product-grid .eyebrow { margin-top:0; }
.product-grid .button,.product-grid .text-link { margin-top:24px; }
.platform-preview { overflow:hidden; border:1px solid var(--line); border-radius:12px; min-width:0; }
.plain-checks { padding-left:20px; margin-top:24px; color:#c2cfdb; }
.plain-checks li { margin:12px 0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-grid article { border-top:1px solid #5b493f; padding:28px 0 10px; }
.feature-grid h3 { font-size:23px; margin:18px 0 12px; }
.feature-grid p { max-width:38ch; }
.company-note { border:1px solid #4b5360; border-radius:12px; background:linear-gradient(140deg,#1b2939,#0e1825); padding:40px; }
.company-note h3 { font-size:28px; line-height:1.5; margin-top:28px; }
.company-location { display:block; margin-top:35px; padding-top:20px; border-top:1px solid #ffffff20; font:11px monospace; color:#ff977a; }
.catalog-nav { display:flex; flex-wrap:wrap; gap:12px; padding-bottom:35px; border-bottom:1px solid var(--line); }
.catalog-nav a { padding:10px 16px; border:1px solid #344358; border-radius:5px; font-size:14px; }
.catalog-nav a:hover { color:#ff9477; border-color:#ff9477; }
.catalog-group { display:grid; grid-template-columns:.85fr 1.4fr; gap:65px; padding:65px 0; border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.catalog-group>div>p:not(.eyebrow) { margin-top:20px; max-width:38ch; }
.catalog-item { padding:26px; border:1px solid var(--line); border-radius:10px; background:#0f1927; margin-bottom:16px; scroll-margin-top:100px; }
.catalog-item:target { border-color:#ff7856; }
.catalog-item h3 { font-size:24px; }
.catalog-item>p { margin:12px 0 20px; }
.catalog-item summary { display:flex; justify-content:space-between; cursor:pointer; color:#dbe4ef; font-size:14px; padding-top:15px; border-top:1px solid var(--line); }
.catalog-item details[open] summary span { transform:rotate(45deg); }
.catalog-item ul { padding-left:19px; margin-top:18px; color:#b6c4d5; }
.catalog-item li { margin:9px 0; font-size:15px; }
.catalog-note { font-size:13px; margin:20px 0; }
@media(max-width:1000px) {
 .hero-content { gap:28px; }
 .hero-feed-heading { padding:18px 14px; }
 .hero-feed .demo-feed { padding:12px 14px; }
 .hero-feed .demo-event { grid-template-columns:31px 76px 1fr; gap:6px; font-size:11px; }
 .feed-brand { font-size:11px; }
 .hero-feed-metrics>div { padding:0 8px; }
 .hero-feed-metrics>div>span { font-size:10px; }
 .product-grid,.catalog-group { gap:30px; }
}
@media(max-width:800px) {
 .hero { height:auto; min-height:0; max-height:none; display:block; padding:140px 0 110px; }
 .hero-content { grid-template-columns:1fr; padding-top:0; gap:20px; }
 .hero-feed { width:100%; max-width:510px; margin-top:15px; }
 .hero-copy>p { margin-top:24px; }
 .hero-feed .demo-event { font-size:12px; }
 .hero-bottom { bottom:22px; }
 .hero-media img { object-position:67% center; }
 .product-grid,.catalog-group { grid-template-columns:1fr; }
 .feature-grid { grid-template-columns:1fr; gap:12px; }
 .company-note { padding:28px; }
 .catalog-group { padding:42px 0; }
 .platform-preview .demo-scene { height:auto; }
}
@media(max-width:390px) {
 .hero-feed-footer { padding:12px; font-size:9px; }
 .hero-feed .demo-event { font-size:11px; }
 .demo-event { grid-template-columns:36px 75px 1fr; gap:6px; }
 .hero-feed-heading>span:last-child { font-size:9px; }
 .catalog-item { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .hero-feed * { animation:none!important; } }
.fleet-demo:not(.hero-feed) .demo-event strong { padding:2px 4px; text-align:center; color:#152330; background:#e5e7db; border:1px solid #acb8bd; border-radius:3px; font-size:11px; }
.map-vehicle strong { width:max-content; padding:2px 5px; border-radius:3px; background:#e5e7db; color:#152330; font-size:11px; }

.hero-copy>p { font-size:18px; line-height:1.75; margin-top:24px; }

/* Compact glass overlay, letting the hero imagery show through. */
.hero-feed {
 width:100%; max-width:390px; justify-self:end;
 background:linear-gradient(135deg,rgba(32,43,65,.48),rgba(13,24,42,.38));
 border:1px solid rgba(177,195,219,.24); border-radius:14px;
 backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
 box-shadow:inset 0 1px 0 #ffffff0b,0 12px 35px #0002;
}
.hero-feed-heading { padding:14px 16px; }
.hero-feed .feed-brand { font-size:12px; }
.hero-feed-heading>span:last-child { font-size:9px; }
.hero-feed-metrics { padding:14px 8px; }
.hero-feed-metrics>div { padding:0 9px; }
.hero-feed-metrics strong { font-size:25px; line-height:1.2; }
.hero-feed-metrics strong span { font-size:16px; }
.hero-feed-metrics>div>span { font-size:10px; }
.hero-feed .hero-route { display:none; }
.hero-feed .demo-feed { padding:10px 16px 5px; background:transparent; }
.hero-feed .demo-feed-label { font-size:9px; margin-bottom:4px; }
.hero-feed .demo-event { grid-template-columns:33px 72px 1fr; gap:7px; padding:9px 0; font-size:11px; }
.hero-feed .demo-event time { font-size:10px; }
.hero-feed .demo-event strong { padding:0; border:0; box-shadow:none; background:transparent; color:#f0f3f8; font-size:11px; text-align:left; }
.hero-feed-footer { padding:10px 16px; font-size:9px; border-top:1px solid #ffffff0a; }
.hero-feed-footer button { padding:5px 7px; font-size:9px; }
@media(max-width:800px) {
 .hero-feed { max-width:370px; justify-self:start; }
}
@media(max-width:390px) {
 .hero-feed-heading,.hero-feed-footer { padding-left:12px; padding-right:12px; }
 .hero-feed .demo-feed { padding-left:12px; padding-right:12px; }
 .hero-feed .demo-event { grid-template-columns:30px 67px 1fr; gap:5px; }
}

.hero-tracking { padding:0 16px 9px; }
.hero-tracking svg { display:block; width:100%; height:52px; overflow:visible; }
.hero-tracking>div { display:flex; justify-content:space-between; color:#a1b4c5; font-size:9px; }
.hero-truck-marker { transform:translate(20px,42px); animation:hero-truck-track 12s linear infinite; animation-play-state:paused; }
.hero-tracking-path { animation:hero-tracking-flow 2s linear infinite; animation-play-state:paused; }
.hero-feed[data-running="true"] .hero-truck-marker,.hero-feed[data-running="true"] .hero-tracking-path { animation-play-state:running; }
@keyframes hero-truck-track {
 0% { transform:translate(20px,42px); }
 28% { transform:translate(100px,42px); }
 44% { transform:translate(140px,22px); }
 73% { transform:translate(220px,22px); }
 100% { transform:translate(292px,38px); }
}
@keyframes hero-tracking-flow { to { stroke-dashoffset:-14; } }
@media(prefers-reduced-motion:reduce) {
 .hero-feed .hero-truck-marker { animation:none; transform:translate(140px,22px); }
 .hero-feed .hero-tracking-path { animation:none; }
}

.hero-copy .hero-video-toggle { position:static; display:block; margin-top:16px; min-height:36px; padding:7px 12px; border-radius:5px; font-size:11px; }

/* Mobile video stays behind the headline instead of below an empty backdrop. */
@media(max-width:600px) {
 .hero-media img,.hero-media video {
  inset:70px 0 auto; width:100%; height:700px; max-height:calc(100% - 70px);
  object-fit:cover; object-position:70% center;
 }
 .hero-shade {
  background:linear-gradient(180deg,#090f194d 0%,#090f1977 22%,#090f19a6 42%,#090f19e8 62%,#090f19 78%),linear-gradient(90deg,#090f1977,#090f191a);
 }
 .hero-copy>p:not(.eyebrow) { font-size:17px; line-height:1.75; }
}

/* Company page: shared homepage type scale and section rhythm. */
.company-network { position:relative; width:100%; min-width:0; aspect-ratio:600/380; overflow:hidden; border:1px solid #354052; background:#0c1521; border-radius:8px; }
.company-network-grid { position:absolute; inset:0; background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:32px 32px; }
.company-network svg { width:100%; height:100%; position:absolute; inset:0; fill:none; }
.company-network svg path { stroke:#ff7856; stroke-width:1; stroke-dasharray:4 6; }.company-network svg circle { stroke:#ff785619; }
.company-country { position:absolute; transform:translate(-50%,-50%); display:flex; gap:8px; align-items:center; background:#142131; border:1px solid #364354; padding:10px 17px; border-radius:4px; font-size:14px; }
.country-home { left:50%; top:50%; flex-direction:column; gap:5px; padding:20px 28px; border-color:#ff785670; background:#1e252e; }
.country-home strong { font:500 25px 'Space Grotesk',sans-serif; }.country-home small,.country-home span { font:9px ui-monospace,monospace; letter-spacing:.1em; color:#ff987c; }.country-home span { color:var(--muted); }
.country-kenya { top:20%; left:50%; }.country-zambia { top:78%; left:19%; }.country-congo { top:78%; left:81%; }
.company-country i { width:5px; height:5px; background:#8cdbc0; border-radius:50%; }
.company-network-caption { position:absolute; bottom:13px; left:18px; font:8px ui-monospace,monospace; letter-spacing:.12em; color:var(--subtle); }
.company-intro { padding:140px 0 60px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,#101925,var(--ink)); }
.company-intro h1 { font-size:clamp(34px,3.7vw,50px); max-width:880px; margin-top:20px; line-height:1.18; text-wrap:pretty; }
.company-intro-summary { max-width:760px; margin-top:24px; font-size:18px; line-height:1.75; }
.company-intro-origin { margin-top:18px; font-size:14px; color:#aab6c4; }
.company-page .section-heading h2 { margin-top:14px; }
.company-challenges,.company-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.company-challenges article { padding-top:24px; border-top:1px solid var(--line); }
.company-challenges h3,.company-capabilities h3 { margin:14px 0 12px; font-size:21px; }
.company-challenges p,.company-capabilities p,.company-prose p,.company-direction p,.company-region p:not(.eyebrow),.company-contact p:not(.eyebrow) { font-size:16px; line-height:1.75; }
.company-story-section,.company-technology { background:#0e1724; border-block:1px solid var(--line); }
.company-story-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:64px; }
.company-story-grid h2,.company-region h2 { margin-top:14px; max-width:500px; }
.company-prose p+p { margin-top:20px; }
.company-founded { display:flex; align-items:center; gap:20px; border-top:1px solid var(--line); margin-top:32px; padding-top:22px; }
.company-founded strong { font:600 30px 'Space Grotesk',sans-serif; color:#ff987c; }.company-founded span { color:var(--subtle); font-size:13px; max-width:18ch; line-height:1.6; }
.company-direction-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }.company-direction article+article { padding-left:40px; border-left:1px solid var(--line); }.company-direction h2 { font-size:clamp(26px,2.4vw,32px); margin:14px 0 20px; max-width:24ch; }.company-direction p { max-width:55ch; }
.company-capabilities { gap:20px; }.company-capabilities article { display:flex; flex-direction:column; padding:28px; background:#111e2d; border:1px solid var(--line); border-radius:8px; }.company-capabilities p { margin-bottom:24px; }.company-capability-focus { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); color:#c0cdd9; font-size:12px; }.company-platform-link { margin-top:28px; }
.company-region-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }.company-region p:not(.eyebrow) { margin-top:20px; max-width:52ch; }
.company-contact { padding:55px 0; background:#14202e; border-block:1px solid var(--line); }.company-contact-grid { display:flex; justify-content:space-between; align-items:center; gap:36px; }.company-contact h2 { margin:14px 0 18px; font-size:clamp(28px,2.8vw,36px); }.company-contact .button { flex-shrink:0; }
@media(max-width:900px) {
.company-story-grid,.company-region-grid,.company-direction-grid { gap:32px; }.company-challenges { gap:24px; }.company-capabilities { grid-template-columns:1fr; }.company-capabilities article { padding:24px; }.company-direction article+article { padding-left:24px; }.company-contact-grid { align-items:start; flex-direction:column; }
}
@media(max-width:600px) {
.company-intro { padding:110px 0 42px; }.company-intro h1 { font-size:34px; }.company-intro-summary { font-size:17px; }.company-intro-origin { font-size:13px; }.company-story-grid,.company-region-grid,.company-direction-grid,.company-challenges { grid-template-columns:1fr; gap:30px; }.company-direction article+article { padding:30px 0 0; border-left:0; border-top:1px solid var(--line); }.company-network { min-height:250px; }.company-country { font-size:12px; padding:8px 12px; }.country-home { padding:12px; }.country-home strong { font-size:20px; }.country-home small { font-size:8px; }.country-zambia { left:20%; }.country-congo { left:80%; }.company-contact { padding:42px 0; }
}

/* Company visuals use finite motion, triggered by the shared reveal observer. */
.company-signal-visual { margin-top:36px; padding:16px 22px 12px; border:1px solid var(--line); border-radius:8px; background:radial-gradient(ellipse at center,#25354966,transparent 65%),#0c1521; overflow:hidden; }
.company-visual-caption { display:block; font:9px ui-monospace,monospace; letter-spacing:.12em; color:var(--subtle); }
.company-signal-visual svg { display:block; width:100%; height:auto; max-height:180px; }
.signal-grid { opacity:.3; }
.company-mini-visual { height:115px; margin-bottom:24px; background:linear-gradient(135deg,#13213280,#0c152130); border:1px solid #27334590; border-radius:6px; }
.company-mini-visual svg { width:100%; height:100%; display:block; }
.company-tech-icon { width:44px; height:44px; margin-bottom:22px; }
@media(prefers-reduced-motion:no-preference) {
.company-signal-visual.in-view .signal-stream { animation:company-data-flow 4s linear; }
.company-challenges .in-view .visual-trace { animation:company-trace-in 1.5s ease-out both; }
.company-network.in-view svg path { animation:company-region-flow 4s linear; }
.company-network.in-view .country-home { animation:company-hub-glow 3s ease-in-out; }
}
@keyframes company-data-flow { from { stroke-dashoffset:168; } to { stroke-dashoffset:0; } }
@keyframes company-region-flow { from { stroke-dashoffset:80; } to { stroke-dashoffset:0; } }
@keyframes company-trace-in { from { opacity:.2; } to { opacity:1; } }
@keyframes company-hub-glow { 50% { box-shadow:0 0 30px #ff785625; border-color:#ff987c; } }
.company-signal-visual .company-signal-mobile { display:none; }
@media(max-width:600px) {
.company-signal-visual { padding:14px 8px; margin-top:28px; }
.company-signal-visual>svg { display:none; }
.company-signal-visual .company-signal-mobile { display:block; width:100%; }
.company-mini-visual { height:105px; }
}

/* Solutions: outcome-led sections with illustrative product motion. */
.solutions-intro { padding:150px 0 68px; background:radial-gradient(ellipse at 85% 50%,#283b5160,transparent 55%); }
.solutions-intro-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; }
.solutions-intro h1 { font-size:clamp(36px,4vw,54px); line-height:1.15; margin-top:18px; }
.solutions-intro p:not(.eyebrow) { margin-top:22px; max-width:49ch; font-size:18px; }
.solutions-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:30px; }
.solutions-intro-note { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--subtle); margin-top:28px; }.solutions-intro-note i { width:4px; height:4px; background:#ff987c; }
.solutions-orbit svg { width:100%; display:block; }
.solutions-nav-shell { position:sticky; top:78px; z-index:15; background:#0c1521f5; backdrop-filter:blur(14px); border-block:1px solid var(--line); }
.solutions-nav-inner { display:flex; align-items:center; gap:14px; }
.solutions-jump { display:flex; gap:7px; overflow-x:auto; padding:12px 0; scrollbar-width:thin; flex:1; }
.solutions-jump a { white-space:nowrap; border:1px solid #334154; border-radius:5px; padding:8px 12px; color:#b9c8d8; font-size:12px; transition:background .2s,color .2s; }
.solutions-jump a:hover,.solutions-jump a[aria-current="location"] { background:#ff785618; border-color:#ff987c80; color:#ffb29c; }
.solutions-motion-toggle { flex-shrink:0; background:transparent; border:1px solid #425369; border-radius:5px; font:500 11px Inter,sans-serif; color:#bccada; padding:10px; cursor:pointer; min-height:40px; }
.solution-feature { padding:80px 0; border-bottom:1px solid var(--line); scroll-margin-top:50px; }
.solution-feature:nth-of-type(even) { background:#0d1622; }
.solution-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.solution-feature:nth-of-type(odd) .solution-feature-copy { order:2; }
.solution-feature h2 { margin:14px 0 16px; }
.solution-outcome { color:#e4ebf3; font-size:19px; line-height:1.5; }
.solution-description { font-size:16px; margin-top:14px; max-width:55ch; }
.solution-checks { list-style:none; padding:0; margin:25px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:15px 22px; }
.solution-checks li { position:relative; padding-left:23px; color:#b3c1d0; font-size:13px; line-height:1.6; }
.solution-checks li::before { content:'✓'; color:#ff987c; position:absolute; left:0; top:1px; }
.solution-feature .button { font-size:13px; min-height:46px; padding:12px 18px; }.solution-feature .text-link { font-size:13px; }
.solution-art { margin:0; min-width:0; background:radial-gradient(ellipse at center,#253c5140,transparent 75%),#101c29; border:1px solid #304156; border-radius:12px; overflow:hidden; box-shadow:0 12px 40px #00000015; }
.solution-art-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 20px; border-bottom:1px solid #304156; font:9px ui-monospace,monospace; letter-spacing:.04em; color:#9cb0c5; }
.solution-art-top span:first-child { display:flex; align-items:center; gap:8px; }.solution-art-top i { width:5px; height:5px; border-radius:50%; background:#8cdbc0; flex-shrink:0; }
.solution-art svg { display:block; width:100%; height:auto; }.solution-art figcaption { padding:13px 20px; border-top:1px solid #304156; font-size:10px; color:#91a6bb; }
.solutions-onboarding { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }.solutions-onboarding article { padding-top:24px; border-top:1px solid var(--line); }.solutions-onboarding h3 { font-size:20px; margin:13px 0; }.solutions-onboarding p { font-size:15px; }
.solutions-next { background:#14202e; }
.sol-truck { transform:translate(55px,265px); }
@media(prefers-reduced-motion:no-preference) {
.sol-route { animation:sol-flow 3s linear infinite paused; }
.sol-truck { animation:sol-travel 12s linear infinite paused; }
.sol-chart { stroke-dasharray:800; animation:sol-chart-draw 5s ease-in-out infinite paused; }
.sol-scan { animation:sol-scan-rows 9s steps(1) infinite paused; }
.sol-road { animation:sol-road-flow 1.8s linear infinite paused; }
.sol-detect { animation:sol-emphasis 4s ease-in-out infinite paused; }
.sol-wireless { animation:sol-emphasis 3s ease-in-out infinite paused; }
.sol-bar { transform-origin:center 260px; animation:sol-bars 5s ease-in-out infinite paused; animation-delay:var(--bar-delay); }
.sol-gauge { animation:sol-emphasis 4s ease-in-out infinite paused; }
[data-solution-art].is-running :is(.sol-route,.sol-truck,.sol-chart,.sol-scan,.sol-road,.sol-detect,.sol-wireless,.sol-bar,.sol-gauge) { animation-play-state:running; }
}
@keyframes sol-flow { to { stroke-dashoffset:-60; } }
@keyframes sol-travel { 0% { transform:translate(55px,265px); } 20% { transform:translate(130px,225px); } 40% { transform:translate(210px,225px); } 68% { transform:translate(285px,145px); } 90%,100% { transform:translate(405px,90px); } }
@keyframes sol-chart-draw { 0% { stroke-dashoffset:800; } 55%,100% { stroke-dashoffset:0; } }
@keyframes sol-scan-rows { 0%,100% { transform:translateY(0); } 33% { transform:translateY(62px); } 66% { transform:translateY(124px); } }
@keyframes sol-road-flow { to { stroke-dashoffset:-34; } }
@keyframes sol-emphasis { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes sol-bars { 0% { transform:scaleY(.2); } 55%,100% { transform:scaleY(1); } }
@media(max-width:1100px) { .solutions-intro-grid,.solution-feature-grid { gap:35px; }.solution-checks { grid-template-columns:1fr; gap:10px; } }
@media(max-width:900px) { .solutions-nav-shell { top:74px; }.solutions-intro-grid { gap:24px; }.solutions-intro { padding-top:125px; }.solution-feature-grid { grid-template-columns:1fr; gap:32px; }.solution-feature:nth-of-type(odd) .solution-feature-copy { order:0; }.solution-art { width:100%; max-width:650px; justify-self:center; }.solution-checks { grid-template-columns:1fr 1fr; }.solution-feature { padding:60px 0; } }
@media(max-width:600px) {
.solutions-intro { padding:110px 0 40px; }.solutions-intro-grid { grid-template-columns:1fr; gap:20px; }.solutions-intro h1 { font-size:36px; }.solutions-intro p:not(.eyebrow) { font-size:17px; }.solutions-orbit { max-width:360px; width:100%; justify-self:center; }.solutions-orbit svg { max-height:220px; }.solutions-nav-shell { top:70px; }.solutions-nav-inner { gap:8px; }.solutions-jump a { padding:10px; font-size:11px; }.solutions-motion-toggle { font-size:10px; max-width:70px; padding:6px; }.solution-feature { padding:48px 0; }.solution-checks { grid-template-columns:1fr; }.solution-art-top { padding:13px 12px; font-size:8px; }.solution-art-top span:last-child { display:none; }.solution-art figcaption { padding:12px; font-size:9px; }.solutions-actions { gap:20px; }.solutions-onboarding { grid-template-columns:1fr; gap:26px; }
}

/* Platform and enquiry pages share the established company/solutions scale. */
.platform-intro { padding:140px 0 60px; background:linear-gradient(120deg,#101925,var(--ink)); border-bottom:1px solid var(--line); }
.platform-intro-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:70px; align-items:center; }
.platform-intro h1,.contact-page h1 { font-size:clamp(34px,3.7vw,50px); line-height:1.18; margin-top:20px; }
.platform-intro-grid>div>p:not(.eyebrow) { margin-top:24px; font-size:18px; max-width:54ch; }
.platform-summary { border:1px solid var(--line); border-radius:8px; background:#111e2d; padding:28px; }.platform-summary ul { list-style:none; margin:20px 0; padding:0; }.platform-summary li { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }.platform-summary li span { font:11px ui-monospace,monospace; color:#ff987c; }.platform-summary-note { color:var(--subtle); font-size:11px; }
.platform-page .section-heading h2 { margin-top:14px; }
.platform-demo-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:40px; align-items:center; }.platform-demo-grid>* { min-width:0; }.platform-demo-notes { padding-right:10px; }.platform-demo-notes h3 { margin:18px 0; }.platform-demo-notes p { font-size:16px; }.platform-demo-notes .plain-checks { font-size:14px; }.platform-demo-notes .text-link { margin-top:20px; }
.platform-demo-grid .fleet-demo { border:1px solid var(--line); border-radius:10px; overflow:hidden; }.platform-demo-grid .demo-scene,.platform-demo-grid .demo-scene .map-canvas { height:300px; }
.platform-process,.platform-questions { background:#0e1724; border-block:1px solid var(--line); }
.platform-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }.platform-steps article { padding:26px; border:1px solid var(--line); border-radius:8px; background:#111e2d; }.platform-steps h3 { font-size:21px; margin:14px 0; }.platform-steps p { font-size:16px; }
.platform-configuration { display:grid; grid-template-columns:1fr 1fr; gap:70px; }.platform-configuration h2 { margin-top:14px; max-width:23ch; }.platform-configuration>div>p:not(.eyebrow) { margin:20px 0; max-width:52ch; font-size:16px; }.platform-config-list article { padding:22px 0; border-bottom:1px solid var(--line); }.platform-config-list article:first-child { padding-top:0; }.platform-config-list h3 { font-size:21px; margin-bottom:12px; }.platform-config-list p { font-size:16px; }
.platform-faq-list details { border-bottom:1px solid var(--line); padding:20px 0; }.platform-faq-list details:first-child { padding-top:0; }.platform-faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; list-style:none; font-size:17px; }.platform-faq-list summary::-webkit-details-marker { display:none; }.platform-faq-list summary span { color:#ff987c; font-size:22px; }.platform-faq-list details[open] summary span { transform:rotate(45deg); }.platform-faq-list details p { margin-top:18px; font-size:16px; }
.contact-page-section { padding:140px 0 80px; background:radial-gradient(ellipse at top left,#1d2b3c70,transparent 55%); }
.contact-page-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:start; }.contact-page-grid>* { min-width:0; }.contact-page-copy>p:not(.eyebrow) { font-size:18px; margin-top:24px; max-width:44ch; }
.contact-agenda { margin-top:40px; border-top:1px solid var(--line); padding-top:26px; }.contact-agenda h2 { font-size:21px; }.contact-agenda ol { list-style:none; padding:0; margin:20px 0 0; }.contact-agenda li { display:flex; gap:17px; padding:16px 0; }.contact-agenda li>span { color:#ff987c; font:11px ui-monospace,monospace; padding-top:5px; }.contact-agenda strong { font-size:16px; font-weight:600; }.contact-agenda li p { font-size:14px; margin-top:4px; }
.contact-direct { border-top:1px solid var(--line); padding-top:25px; margin-top:20px; }.contact-direct a { display:flex; align-items:center; gap:15px; font-size:16px; color:#e1e9f1; margin-top:12px; overflow-wrap:anywhere; }.contact-direct svg { width:20px; height:20px; fill:none; stroke:currentColor; flex-shrink:0; }
.contact-page #contact-form { margin:0; padding:32px; background:#111e2d; border:1px solid #304156; border-radius:10px; color:var(--text); box-shadow:none; }
.contact-page #contact-form h2 { font-size:25px; margin:12px 0; }.contact-page .contact-form-heading>p:not(.eyebrow) { font-size:14px; color:var(--muted); margin-bottom:26px; }
.contact-enquiry fieldset { padding:0; margin:0 0 26px; border:0; min-width:0; }.contact-enquiry legend { display:block; width:100%; padding:0 0 12px; margin-bottom:16px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.04em; color:#c5d2df; }
.contact-page #contact-form label { display:block; font-size:13px; font-weight:500; color:#d2deea; margin-bottom:18px; }.contact-page #contact-form label>span { color:#91a4b8; font-size:10px; font-weight:400; }
.contact-page #contact-form :is(input,select,textarea) { display:block; margin-top:8px; width:100%; min-width:0; background:#0b1623; color:#edf1f5; border:1px solid #3c4d62; border-radius:5px; padding:12px; font:400 14px Inter,sans-serif; min-height:46px; box-shadow:none; }.contact-page #contact-form textarea { resize:vertical; line-height:1.6; }.contact-page #contact-form :is(input,textarea)::placeholder { color:#8398ad; }.contact-page #contact-form :is(input,select,textarea):focus-visible { outline:2px solid #ff987c; outline-offset:2px; border-color:#ff987c; }.contact-page #contact-form .form-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-page #contact-form .button { width:100%; justify-content:space-between; min-height:48px; }.contact-page #contact-form .form-note { font-size:12px; line-height:1.7; color:#99adc0; margin-top:16px; }.contact-page #contact-form .form-feedback { font-size:13px; color:#8cdbc0; }.contact-page #contact-form .email-fallback { display:inline-block; margin-top:12px; font-size:12px; color:#bdccdb; }
@media(max-width:1000px) { .platform-intro-grid,.platform-configuration,.contact-page-grid { gap:35px; }.platform-demo-grid { grid-template-columns:1fr; }.platform-demo-notes { max-width:650px; }.contact-page #contact-form { padding:24px; } }
@media(max-width:700px) { .platform-intro-grid,.platform-configuration,.platform-steps,.contact-page-grid { grid-template-columns:1fr; }.platform-intro { padding:110px 0 42px; }.platform-intro h1,.contact-page h1 { font-size:34px; }.platform-intro-grid>div>p:not(.eyebrow),.contact-page-copy>p:not(.eyebrow) { font-size:17px; }.platform-summary { padding:22px; }.platform-steps { gap:20px; }.platform-demo-grid .demo-scene,.platform-demo-grid .demo-scene .map-canvas { height:260px; }.contact-page-section { padding:110px 0 54px; }.contact-page-grid { gap:35px; }.contact-agenda { margin-top:28px; }.contact-page #contact-form .form-pair { grid-template-columns:1fr; gap:0; }.contact-page #contact-form { padding:22px 18px; }.contact-page #contact-form h2 { font-size:23px; } }

/* Platform-specific event review replaces the repeated company network. */
.platform-event-replay { margin-top:38px; border:1px solid #304156; border-radius:10px; background:#0d1825; overflow:hidden; }
.platform-event-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid var(--line); }.platform-event-top>span:last-child { color:var(--subtle); font-size:11px; }
.platform-event-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.event-stage { padding:24px; min-width:0; }.event-stage+.event-stage { border-left:1px solid var(--line); }
.event-stage-label { font:10px ui-monospace,monospace; color:#9bb0c4; display:flex; gap:12px; align-items:center; margin-bottom:22px; }.event-stage-label>span { color:#ff987c; }
.event-alert { display:grid; grid-template-columns:8px 1fr; gap:5px 10px; }.event-alert>i { width:6px; height:6px; background:#ff987c; border-radius:50%; margin-top:10px; }.event-alert strong { font-size:16px; }.event-alert>span { grid-column:2; font-size:12px; color:var(--subtle); }.event-stage svg { display:block; width:100%; height:65px; margin-top:6px; }.event-stage>p { font-size:12px; margin-top:20px; }
.event-context { display:grid; gap:12px; }.event-context>div { display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #27334570; padding-bottom:8px; }.event-context span { color:var(--subtle); font-size:12px; }.event-context strong { font-size:13px; font-weight:500; }
.event-task { display:flex; gap:14px; align-items:center; margin:6px 0 24px; }.event-check { width:36px; height:36px; display:grid; place-items:center; border:1px solid #8cdbc050; border-radius:50%; color:#8cdbc0; background:#8cdbc008; }.event-task strong { font-size:15px; }.event-task div>span { display:block; font-size:12px; color:var(--subtle); }.event-task-status { display:flex; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid #27334570; }
.event-replay-track { height:2px; background:#26384a; }.event-replay-track i { display:block; height:100%; background:linear-gradient(90deg,#ff987c,#8cdbc0); transform-origin:left; }
@media(prefers-reduced-motion:no-preference) {
.platform-event-replay.in-view .event-stage { animation:event-stage-reveal 1.2s ease-out both; }.platform-event-replay.in-view .event-stage:nth-child(2) { animation-delay:1.2s; }.platform-event-replay.in-view .event-stage:nth-child(3) { animation-delay:2.4s; }.platform-event-replay.in-view .event-replay-track i { animation:event-review-progress 3.6s linear both; }
}
@keyframes event-stage-reveal { from { opacity:.2; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes event-review-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* Contact: introduction, primary form, and a compact supporting sidebar. */
.contact-intro-heading { padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--line); }.contact-intro-heading h1 { margin-top:16px; }.contact-intro-heading>p:not(.eyebrow) { max-width:72ch; font-size:17px; margin-top:20px; }
.contact-redesign-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:40px; align-items:start; }.contact-redesign-grid>* { min-width:0; }
.contact-page .contact-redesign-grid #contact-form { padding:32px; background:#101b28; }
.contact-support-panel { padding:26px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(145deg,#142232,#0e1724); }
.contact-support-panel .contact-agenda { margin:0; padding:0; border:0; }.contact-support-panel .contact-agenda h2 { font-size:20px; }.contact-support-panel .contact-agenda li { padding:13px 0; }.contact-support-panel .contact-agenda li p { font-size:13px; }.contact-support-panel .contact-agenda strong { font-size:14px; }.contact-support-panel .contact-direct a { font-size:13px; gap:10px; }.contact-support-panel .contact-direct svg { width:16px; }
.contact-page .contact-redesign-grid .contact-form-heading>p:not(.eyebrow) { margin-bottom:24px; }
.contact-redesign-grid .contact-enquiry legend>span { color:#ff987c; margin-right:12px; font-family:ui-monospace,monospace; }
.contact-page .contact-redesign-grid #contact-form fieldset { margin-bottom:18px; }.contact-page .contact-redesign-grid #contact-form label { margin-bottom:14px; }
.contact-page .contact-redesign-grid #contact-form .contact-form-submit .button { width:auto; min-width:240px; gap:30px; }.contact-page .contact-redesign-grid #contact-form .form-note { max-width:66ch; }
@media(max-width:900px) { .contact-redesign-grid { gap:24px; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }.contact-support-panel { padding:20px; }.contact-page .contact-redesign-grid #contact-form { padding:24px; }.event-stage { padding:18px; }.event-stage-label { font-size:9px; gap:8px; } }
@media(max-width:700px) { .contact-redesign-grid { grid-template-columns:1fr; }.contact-page .contact-redesign-grid #contact-form { padding:24px 18px; }.contact-intro-heading { padding-bottom:26px; margin-bottom:26px; }.contact-page .contact-redesign-grid #contact-form .contact-form-submit .button { width:100%; min-width:0; }.platform-event-stages { grid-template-columns:1fr; }.event-stage+.event-stage { border-left:0; border-top:1px solid var(--line); }.platform-event-top { padding:16px 18px; flex-wrap:wrap; gap:8px; }.event-stage { padding:20px; }.event-stage svg { max-width:350px; }.event-stage>p { margin-top:14px; } }

/* Light wordmarks use the same monospace family as the hero eyebrow. */
.site-header .wordmark-text,.site-footer .wordmark-text {
 font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
 font-weight:400;
 letter-spacing:.08em;
 font-size:20px;
}
.site-footer .brand { width:auto; }
.demo-vehicle-truck { transition:none; }
@media(max-width:600px) {
 .site-header .wordmark-text,.site-footer .wordmark-text { font-size:18px; }
}

/* Client logos — original brand artwork in a quiet, continuous strip. */
.client-marquee { padding: 28px 0 36px; border-bottom: 1px solid #263444; background: #0c1621; }
.client-marquee-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.client-marquee-heading h2 { margin: 0; font: 400 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #aab9c7; }
.client-marquee-toggle { background: transparent; color: #aab9c7; border: 1px solid #34485a; border-radius: 5px; padding: 7px 12px; font-size: 12px; cursor: pointer; min-height: 36px; }
.client-marquee-toggle:hover { color: #fff; border-color: #8cdbc0; }
.client-marquee-window { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent); }
.client-marquee-track { display: flex; width: max-content; }
.client-logo-group { display: flex; flex: none; gap: 16px; padding: 0 16px 0 0; margin: 0; list-style: none; }
.client-logo { display: flex; align-items: center; justify-content: center; width: 180px; height: 96px; background: #fff; border-radius: 5px; padding: 12px 18px; }
.client-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.client-marquee.is-ready .client-marquee-track { animation: client-scroll 65s linear infinite; animation-play-state: paused; }
.client-marquee.is-running .client-marquee-track { animation-play-state: running; }
.client-marquee-window:hover .client-marquee-track { animation-play-state: paused; }
@keyframes client-scroll { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .client-logo { width: 144px; height: 82px; padding: 10px 14px; } .client-marquee { padding: 24px 0 28px; } }
@media (prefers-reduced-motion: reduce) {
  .client-marquee .client-marquee-track { animation: none; width: 100%; }
  .client-marquee-window { mask-image: none; overflow: visible; }
  .client-logo-group { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); padding: 0; }
  .client-logo { width: 100%; }
  .client-logo-group[aria-hidden] { display: none; }
  .client-marquee-toggle { display: none; }
}