@font-face {
  font-family: "Lexend";
  src: url("/fonts/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --concrete: #f1f2f2;
  --steel: #8b949a;
  --steel-light: #c7cdd0;
  --charge: #d9ff00;          /* EVIAS energy accent, used only for charge */
  --charge-deep: #aecb00;     /* charging lanes, readable on concrete */
  --text-muted: #4d555a;

  --font: "Lexend", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --page-pad: clamp(1.25rem, 5vw, 4.5rem);
  --max: 76rem;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--black);
  background: var(--white);
  line-height: 1.55;
}

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

a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 4px;
}

/* ---------- Header ---------- */

.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--page-pad) 0;
}

.lockup { display: inline-block; }
.lockup img { width: clamp(8.5rem, 16vw, 11.5rem); }

/* ---------- Hero ---------- */

.hero-wrap {
  position: relative;
  overflow: hidden;
}

.hero-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--page-pad) clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

h1 {
  margin: 0 0 1.75rem;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Three stacked statements, each one step lighter: moving, charging, never stopping */
h1 span { display: block; white-space: nowrap; }
h1 span:nth-child(2) { font-weight: 500; }
h1 span:nth-child(3) { font-weight: 300; }

.lead {
  margin: 0 0 2.25rem;
  max-width: 32rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-muted);
}

.button {
  display: inline-block;
  padding: 1rem 1.75rem;
  background: var(--black);
  color: var(--white);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
.button:hover { background: #2a2f33; }

.hero-scene { margin: 0; position: relative; }

.tractor-img {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.12));
}

/* Ship-to-shore crane working slowly behind the tractor */
.crane-svg {
  position: absolute;
  right: -6%;
  top: -14%;
  width: 78%;
  height: auto;
  overflow: visible;
}
.bg-line { fill: none; stroke: var(--steel-light); stroke-width: 4; stroke-linecap: square; }
.bg-thin { fill: none; stroke: var(--steel-light); stroke-width: 1.5; }
.bg-fill { fill: var(--steel-light); }

/* ---------- Winding road with the in-ground charging system ---------- */

.road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-edge    { stroke: #e3e6e7; stroke-width: 96; }
.road-surface { stroke: #f2f3f3; stroke-width: 88; }
.lane         { stroke: var(--charge-deep); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 80 30; }

@media (prefers-reduced-motion: no-preference) {
  /* Two charging lines flowing in opposite directions */
  .lane--right { animation: lane-right 24.3s linear infinite; }
  .lane--left  { animation: lane-left 24.3s linear infinite; }
  /* The crane trolley travels along the boom, nothing else moves */
  .crane-trolley { animation: trolley 22s ease-in-out infinite; }
}

@keyframes lane-right { to { stroke-dashoffset: -440; } }
@keyframes lane-left  { to { stroke-dashoffset: 440; } }
/* From the tip of the boom on the left to its end on the right */
@keyframes trolley { 0%, 100% { transform: translateX(-56px); } 45%, 55% { transform: translateX(320px); } }

/* ---------- Capabilities ---------- */

.capabilities {
  background: var(--black);
  color: var(--white);
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.capabilities > * { padding-left: var(--page-pad); padding-right: var(--page-pad); }

.capabilities h2 {
  max-width: var(--max);
  margin: 0 auto 2.5rem;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
}

.capability-list {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Three parallel bands above each item, borrowed from the Cavotec mark */
.capability {
  padding-top: 1.5rem;
  background:
    linear-gradient(var(--white), var(--white)) 0 0 / 3.5rem 2px no-repeat,
    linear-gradient(var(--white), var(--white)) 0 6px / 2.75rem 2px no-repeat,
    linear-gradient(var(--white), var(--white)) 0 12px / 2rem 2px no-repeat;
}

.capability h3 { margin: 0 0 0.5rem; font-weight: 500; font-size: 1.15rem; }
.capability p  { margin: 0; color: var(--steel-light); max-width: 22rem; }

/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.75rem var(--page-pad);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.site-footer p { margin: 0; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-scene { order: -1; max-width: 30rem; margin: 0 auto; }
  .hero-road { opacity: 0.35; }
  .capability-list { grid-template-columns: 1fr; }
}