:root {
  --lab-paper: var(--ks-paper);
  --lab-ink: var(--ks-ink);
  --lab-soft: var(--ks-ink-soft);
  --lab-line: var(--ks-line);
  --lab-coral: var(--ks-coral);
  --lab-lime: var(--ks-lime);
  --lab-night: var(--ks-night);
  --lab-blue: var(--ks-blue);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--lab-paper); color: var(--lab-ink); font-family: var(--ks-body); }
a { color: inherit; }
img { display: block; max-width: 100%; }

.lab-shell { max-width: 1480px; margin: 0 auto; padding: 0 38px 55px; overflow: hidden; }
.lab-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 90px; align-items: end; min-height: 590px; padding: 86px 0 80px; border-bottom: 1px solid var(--lab-line); }
.lab-kicker, .lab-section-index, .lab-note-label, .tool-topline { margin: 0; color: var(--lab-soft); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lab-kicker { display: flex; align-items: center; gap: 8px; }
.lab-kicker span { width: 7px; height: 7px; background: var(--lab-coral); border-radius: 50%; }
.lab-hero h1 { max-width: 760px; margin: 26px 0 28px; font: 800 88px/.9 var(--ks-display); }
.lab-hero h1 em, .lab-manifesto h2 em { color: var(--lab-coral); font-style: normal; }
.lab-lead { max-width: 510px; margin: 0 0 34px; color: var(--lab-soft); font-size: 16px; line-height: 1.8; }
.lab-meta { display: flex; flex-wrap: wrap; gap: 22px; color: var(--lab-soft); font-size: 11px; }
.lab-meta span { padding-top: 10px; border-top: 1px solid var(--lab-line); }
.lab-meta b { margin-right: 5px; color: var(--lab-ink); font-weight: 800; }
.lab-hero-note { max-width: 300px; justify-self: end; padding: 22px 0 24px 25px; border-left: 2px solid var(--lab-coral); }
.lab-note-label { margin-bottom: 22px; }
.lab-hero-note strong { display: block; margin-bottom: 23px; font: 800 34px/.95 var(--ks-display); }
.lab-hero-note p:last-child { max-width: 230px; margin: 0; color: var(--lab-soft); font-size: 12px; line-height: 1.75; }

.tool-shelf { padding: 104px 0 112px; }
.shelf-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 42px; }
.shelf-heading h2, .lab-manifesto h2 { margin: 17px 0 0; font: 800 54px/.92 var(--ks-display); }
.shelf-heading > p { max-width: 340px; margin: 0; color: var(--lab-soft); font-size: 13px; line-height: 1.75; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--lab-ink); border-bottom: 1px solid var(--lab-line); }
.tool-feature { display: grid; grid-template-rows: 255px 1fr; min-height: 590px; color: var(--lab-ink); text-decoration: none; }
.tool-feature + .tool-feature { border-left: 1px solid var(--lab-line); }
.tool-image { position: relative; overflow: hidden; background: var(--lab-night); }
.tool-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; }
.tool-feature-stub .tool-image img { filter: saturate(.72) contrast(.95); }
.tool-feature-radar .tool-image img { object-position: top center; }
.tool-feature:hover .tool-image img { transform: scale(1.035); filter: saturate(1) contrast(1); }
.tool-image > span { position: absolute; right: 16px; bottom: 15px; padding: 8px 9px; background: var(--lab-lime); color: var(--lab-ink); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.tool-feature-radar .tool-image > span { background: var(--lab-coral); }
.tool-copy { display: flex; flex-direction: column; padding: 30px 30px 28px; }
.tool-topline { display: flex; justify-content: space-between; gap: 12px; color: var(--lab-coral); }
.tool-feature-stub .tool-copy { background: var(--lab-night); color: var(--lab-paper); }
.tool-feature-stub .tool-topline { color: var(--lab-lime); }
.tool-copy h3 { margin: 65px 0 17px; font: 800 66px/.82 var(--ks-display); }
.tool-copy p { max-width: 330px; margin: 0 0 28px; color: var(--lab-soft); font-size: 13px; line-height: 1.75; }
.tool-feature-stub .tool-copy p { color: #aba79c; }
.tool-link { display: inline-flex; justify-content: space-between; align-items: center; max-width: 185px; margin-top: auto; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 800; }
.tool-link b { color: var(--lab-coral); }
.tool-feature-stub .tool-link b { color: var(--lab-lime); }

.lab-manifesto { display: grid; grid-template-columns: .7fr 1.15fr .25fr; gap: 35px; padding: 86px 0 96px; border-bottom: 1px solid var(--lab-line); }
.lab-manifesto h2 { margin: 0; font-size: 58px; }
.lab-manifesto p:last-child { max-width: 360px; margin: 28px 0 0; color: var(--lab-soft); font-size: 14px; line-height: 1.8; }
.manifesto-mark { justify-self: end; color: var(--lab-coral); font: 300 95px/.7 var(--ks-display); }
.lab-footer { display: flex; justify-content: space-between; gap: 30px; padding-top: 28px; color: var(--lab-soft); font-size: 11px; }
.lab-footer p { margin: 5px 0 0; }

@media (max-width: 900px) {
  .lab-shell { padding-inline: 22px; }
  .lab-hero { grid-template-columns: 1fr; gap: 48px; min-height: auto; padding: 72px 0 68px; }
  .lab-hero-note { justify-self: start; max-width: none; width: 100%; }
  .shelf-heading { grid-template-columns: 1fr; gap: 20px; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-feature + .tool-feature { border-top: 1px solid var(--lab-line); border-left: 0; }
  .lab-manifesto { grid-template-columns: 1fr 1.6fr; }
  .manifesto-mark { grid-column: 2; }
}

@media (max-width: 560px) {
  .lab-shell { padding-inline: 16px; }
  .lab-hero { padding-top: 58px; }
  .lab-hero h1 { font-size: 57px; }
  .lab-lead { font-size: 14px; }
  .lab-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
  .lab-meta span:last-child { grid-column: 1 / -1; }
  .tool-shelf { padding: 78px 0; }
  .shelf-heading h2 { font-size: 43px; }
  .tool-feature { min-height: 520px; grid-template-rows: 205px 1fr; }
  .tool-copy { padding: 23px 20px 24px; }
  .tool-copy h3 { margin-top: 52px; font-size: 55px; }
  .lab-manifesto { display: block; padding: 70px 0 76px; }
  .lab-manifesto h2 { font-size: 46px; margin-top: 18px; }
  .manifesto-mark { display: block; margin-top: 50px; }
  .lab-footer { display: block; }
  .lab-footer p { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tool-image img { transition: none; }
}