.lab-hero {
  background: var(--color-ivory);
  color: var(--text-primary);
  padding-top: var(--hero-safe-top);
  padding-bottom: 42px;
  overflow: visible;
}
.lab-hero__copy { max-width: 800px; }
.lab-hero h1, .aksi-hero h1 {
  max-width: 18ch;
  margin: 26px 0 16px;
  color: var(--color-teal);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.lab-hero__lead, .aksi-hero__copy > p:not(.eyebrow) {
  max-width: 60ch;
  margin-bottom: 22px;
  color: var(--text-muted);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
}
.page-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--teal-70);
  font-size: 14px;
}
.page-crumb a { color: var(--color-teal); text-decoration: underline; text-underline-offset: 3px; }
.page-crumb a:hover { color: #386b61; }
.lab-compare {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lab-compare__row { padding: 18px 24px 4px; }
.lab-compare__caption {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 14px;
}
.lab-compare__caption strong { color: var(--color-teal); font-weight: 700; text-transform: none; }
.lab-compare__stage { display: block; }
.lab-compare__arrow {
  align-self: center;
  color: var(--teal-40);
  font-size: 18px;
  line-height: 1;
}
/* Defensive: journey-hero.css applies generic `svg text` / `rect + text`
   rules meant for the Aksi/Lab hand-drawn hero art. Those generic selectors
   would otherwise bleed into the reused Jejak vehicle-art (.jv-*) glyphs and
   discolor their route tag / plus-occupancy badge text. Re-assert the
   vehicle-art system's own colors here, scoped to this component only. */
.lab-compare__stage .jv-tag text {
  fill: var(--v-tag-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.lab-compare__stage .jv-plus-text {
  fill: var(--v-plus-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
@media (max-width: 520px) {
  .lab-compare__row { padding: 14px 16px 2px; }
}
.lab-work {
  padding: 46px 0 88px;
  scroll-margin-top: 24px;
}
.lab-work__head { max-width: 720px; margin-bottom: 32px; }
.lab-work__head h2 { margin: 8px 0 14px; max-width: 24ch; }
.lab-work__head p:last-child { font-size: 17px; line-height: 1.6; }
.lab-work__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.lab-controls { border-top: 2px solid var(--color-teal); }
.lab-field { padding: 20px 0; border-bottom: 1px solid var(--teal-18); }
.lab-field label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: var(--color-teal); font-weight: 700; }
.lab-field output { color: var(--color-teal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-field select {
  width: 100%; min-height: 50px; padding: 10px 14px;
  border: 1px solid var(--teal-40); border-radius: 8px;
  background: #fffefa; color: var(--color-teal); font: inherit; font-weight: 600;
}
.lab-field select:focus-visible, .lab-field input:focus-visible, .lab-reset:focus-visible, .aksi-clear:focus-visible {
  outline: 3px solid var(--color-lime); outline-offset: 3px;
}
.lab-field input[type=range] { width: 100%; min-height: 32px; accent-color: var(--color-teal); cursor: pointer; }
.lab-field__scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--teal-70); }
.lab-field p { margin-top: 8px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.lab-reset, .aksi-clear { margin-top: 20px; color: var(--color-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.lab-result {
  min-width: 0; padding: clamp(24px, 4vw, 44px);
  border-radius: 12px; background: var(--color-teal); color: var(--color-ivory);
}
.lab-result__eyebrow { margin-bottom: 24px; color: var(--ivory-80); font-size: 15px; font-weight: 600; }
.lab-result__row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 12px; }
.lab-result__row > span:first-child { font-weight: 700; font-size: 17px; }
.lab-result__row strong { color: var(--color-ivory); font: 700 clamp(42px, 6vw, 76px)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.lab-result__row > span:last-child { grid-column: 2; text-align: right; color: var(--ivory-80); font-size: 14px; }
.lab-result__row--after { margin-top: 28px; }
.lab-result__row--after strong { color: var(--color-lime); }
.lab-result__track { height: 8px; margin-top: 12px; overflow: hidden; background: var(--ivory-16); border-radius: 8px; }
.lab-result__track span { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--ivory-80); transition: width .25s ease; }
.lab-result__track--after span { background: var(--color-lime); }
.lab-result__delta { margin-top: 28px; color: var(--color-lime); font-weight: 700; line-height: 1.5; }
.lab-result__note { margin-top: 12px; color: var(--ivory-80); font-size: 14px; line-height: 1.55; }
.lab-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--teal-18); }
.lab-next p { max-width: 38ch; color: var(--color-teal); font-size: 20px; font-weight: 700; }
@media (max-width: 800px) {
  .lab-work__grid { grid-template-columns: minmax(0, 1fr); }
  .lab-result { order: initial; }
  .lab-work { padding: 32px 0 64px; }
}
@media (max-width: 520px) {
  .lab-hero { padding-top: var(--hero-safe-top); padding-bottom: 28px; }
  .lab-hero h1, .aksi-hero h1 { margin-top: 20px; font-size: clamp(36px, 9vw, 48px); }
  .lab-work__head { margin-bottom: 22px; }
  .lab-next { align-items: flex-start; flex-direction: column; }
  .lab-next .btn { width: 100%; justify-content: center; }
  .lab-result { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-result__track span { transition: none; }
}