:root {
  --asphalt: #1c1e22;
  --blue: #0057ff;
  --hi: #d6ff3d;
  --paper: #f2f3f5;
  --mute: #6b7180;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--asphalt);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.van {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 4vw;
  background: var(--asphalt); color: #fff;
}
.call {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700; font-size: 28px; color: var(--hi); text-decoration: none;
  letter-spacing: .12em;
}
nav { display: flex; gap: 14px; margin-left: auto; font-size: 13px; font-weight: 700; text-transform: uppercase; }
nav a { color: #c5c9d1; text-decoration: none; }
nav a:hover { color: var(--hi); }
.van-end { display: flex; gap: 8px; align-items: center; }
.lang { display: flex; background: #2a2e36; }
.lang button { border: 0; background: transparent; color: #c5c9d1; padding: 6px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.lang button.is-on { background: var(--blue); color: #fff; }
.menu-btn { display: none; background: var(--hi); border: 0; padding: 6px 10px; font-size: 16px; }

.job { padding: 56px 4vw 40px; background:
  linear-gradient(90deg, var(--blue) 8px, transparent 8px),
  var(--paper);
}
.wo { font-family: "Chakra Petch", sans-serif; font-size: 13px; letter-spacing: .14em; color: var(--blue); margin-bottom: 14px; }
.job h1 {
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(42px, 8vw, 84px);
  line-height: .92; font-weight: 700; max-width: 12ch;
}
.lede { max-width: 64ch; margin: 18px 0 26px; color: var(--mute); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 14px 20px; font-weight: 700; text-decoration: none; font-family: "Chakra Petch", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.btn.hi { background: var(--hi); color: var(--asphalt); }
.btn.lo { background: var(--blue); color: #fff; }

.stripes { height: 14px; background: repeating-linear-gradient(-45deg, var(--asphalt), var(--asphalt) 10px, var(--hi) 10px, var(--hi) 20px); }

.block { padding: 64px 4vw; }
.asphalt { background: var(--asphalt); color: #eef0f4; padding: 64px 4vw; }
.hd { max-width: 70ch; margin-bottom: 28px; }
.hd p { font-family: "Chakra Petch", sans-serif; color: var(--blue); letter-spacing: .14em; }
.hd h2 { font-family: "Chakra Petch", sans-serif; font-size: clamp(28px, 4vw, 44px); margin: 6px 0 10px; }
.hd.light p { color: var(--hi); }
.hd.light h2 { color: #fff; }

.layers, .volt, .run, .jobs, .crew-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.layers { grid-template-columns: repeat(3, 1fr); }
.layers article, .run article, .crew-grid article {
  border: 2px solid var(--asphalt); padding: 22px; background: #fff;
}
.volt article, .jobs article { background: #262a32; padding: 22px; border-left: 4px solid var(--hi); }
.layers b, .jobs span { font-family: "Chakra Petch", sans-serif; color: var(--blue); font-size: 22px; }
.asphalt .jobs span { color: var(--hi); }
.layers h3, .volt h3, .run h3, .jobs h3, .crew-grid h3 {
  font-family: "Chakra Petch", sans-serif; font-size: 24px; margin: 8px 0;
}
.layers p, .run p, .crew-grid p { color: var(--mute); }
.volt p, .jobs p { color: #aeb4c0; }

.flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: f; }
.flow li { background: var(--hi); padding: 18px; counter-increment: f; }
.flow li::before { content: "0" counter(f); font-family: "Chakra Petch", sans-serif; font-size: 28px; display: block; }
.flow h3 { font-family: "Chakra Petch", sans-serif; font-size: 22px; margin: 6px 0; }

.stock p { max-width: 78ch; color: #aeb4c0; font-size: 18px; }

.faq details { border-bottom: 2px solid var(--asphalt); padding: 12px 0; }
.faq summary { cursor: pointer; font-family: "Chakra Petch", sans-serif; font-size: 22px; }
.faq p { margin-top: 8px; color: var(--mute); max-width: 80ch; }

.base { background: var(--blue); color: #fff; padding: 64px 4vw; }
.base .hd p { color: var(--hi); }
.base-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.vcard p { margin-bottom: 14px; }
.vcard span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hi); }
.vcard a, .vcard strong { color: #fff; font-size: 20px; text-decoration: none; }
.note { font-size: 14px !important; color: #d6e4ff !important; max-width: 52ch; }

form { display: grid; gap: 12px; }
form label { display: grid; gap: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
form input, form select, form textarea {
  background: transparent; border: 0; border-bottom: 2px solid var(--hi); color: #fff; padding: 10px 0; font: inherit;
}
form button { background: var(--hi); color: var(--asphalt); border: 0; padding: 14px; font-family: "Chakra Petch", sans-serif; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.form-ok { color: var(--hi); }

footer { padding: 22px 4vw; background: var(--asphalt); color: #aeb4c0; display: grid; gap: 6px; font-size: 13px; }
footer strong { font-family: "Chakra Petch", sans-serif; color: var(--hi); font-size: 22px; letter-spacing: .12em; }

@media (max-width: 900px) {
  .layers, .volt, .run, .jobs, .crew-grid, .flow, .base-grid { grid-template-columns: 1fr; }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--asphalt); flex-direction: column; padding: 16px 4vw; }
  nav.open { display: flex; }
  .menu-btn { display: block; }
  .van { position: sticky; }
}