/* Home page hero only: the "lab" render gets more room than other stages.
   Loaded after site.css through the extraCss hook on the home route. */
.home-stage .wrap {
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
  gap: 24px;
  padding-block: clamp(24px, 3vw, 40px);
}
.home-stage .stage-copy { padding-block: 24px; }
.home-stage h1 { font-size: clamp(2.3rem, 3.7vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 8.32em; }
.home-stage .stage-canvas {
  aspect-ratio: auto;
  height: clamp(560px, calc(100vh - 230px), 640px);
  min-height: 560px;
  /* Bleed to the right edge of the viewport; .stage clips any overflow. */
  margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--max)) / 2));
}

@media (max-width: 980px) {
  .home-stage .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; }
  .home-stage .stage-copy { padding-block: 8px 0; }
  .home-stage h1 { max-width: none; }
  .home-stage .stage-canvas {
    order: 0;
    height: clamp(280px, 78vw, 460px);
    min-height: 0;
    max-height: none;
    margin-inline: calc(-1 * var(--gutter));
    width: auto;
  }
}

/* The company facts strip sits close under the hero instead of after a gap. */
.home-doc { padding-top: clamp(8px, 1.5vw, 20px); }
.home-doc .figures { border-top: 0; }

/* Review cards: equal height, and the case study link on its own line. */
.review-band { align-items: stretch; }
.review-band .quote { grid-template-rows: 1fr auto; }
.review-band .quote figcaption { display: grid; gap: 6px; justify-items: start; }