.hero-lab-page {
  background: var(--surface-page);
}

.hero-lab-stage {
  position: relative;
  padding-block-end: var(--space-4);
}

.hero-home {
  position: relative;
  width: calc(100% - 10px);
  max-width: none;
  height: clamp(42.5rem, 50vw, 47.5rem);
  margin-inline: 5px;
  overflow: hidden;
  color: var(--color-on-dark);
  background: var(--surface-dark);
}

.hero-home__media,
.hero-home__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-home__media {
  object-fit: cover;
  object-position: 58% center;
}

.hero-home__shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(25, 43, 53, 0.93) 0%, rgba(25, 43, 53, 0.79) 34%, rgba(25, 43, 53, 0.34) 64%, rgba(25, 43, 53, 0.14) 100%),
    linear-gradient(0deg, rgba(25, 43, 53, 0.42) 0%, transparent 42%, rgba(25, 43, 53, 0.18) 100%);
}

.hero-home .site-header {
  position: absolute;
  z-index: 10;
  inset-block-start: var(--space-1);
  inset-inline: 0;
}

.hero-home__inner {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  align-items: center;
  padding-block: 7rem 6rem;
}

.hero-home__copy {
  width: min(100%, 42rem);
  margin-inline-start: var(--space-4);
}

.hero-home__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.hero-home__eyebrow::before {
  width: 2.5rem;
  height: 0.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-brand-accent);
  content: "";
}

.hero-home__title {
  margin-block: 0 var(--space-3);
  color: var(--color-on-dark);
  text-shadow: 0 2px 18px rgba(25, 43, 53, 0.26);
}

.hero-home__title-line {
  display: block;
}

.hero-home__title-line-accent {
  color: var(--color-brand-accent);
}

.hero-home__intro {
  max-width: 36rem;
  margin-block-end: var(--space-3);
  color: var(--color-on-dark);
  font-size: var(--font-size-lead);
}

.hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.hero-home__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-small);
}

.hero-home__reserved {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(calc(100% - 96px), 65.625rem);
  min-height: 5rem;
  align-items: flex-end;
  justify-content: center;
  margin: -2.5rem auto 0;
  padding: var(--space-1);
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-brand-primary);
  border-radius: var(--radius-standard);
  background: rgba(243, 247, 248, 0.88);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.hero-lab-meta {
  padding-block: var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.hero-lab-meta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2);
  border: var(--border-decorative);
  border-radius: var(--radius-standard);
  background: var(--surface-card);
}

@media (min-width: 62rem) {
  .hero-home__title-line:last-child {
    white-space: nowrap;
  }
}

@media (max-width: 61.999rem) {
  .hero-home {
    height: auto;
    min-height: 42.5rem;
  }

  .hero-home__media {
    object-position: 66% center;
  }

  .hero-home__shade {
    background: linear-gradient(90deg, rgba(25, 43, 53, 0.92), rgba(25, 43, 53, 0.46));
  }

  .hero-home__inner {
    min-height: 42.5rem;
    padding-block: 7rem 6rem;
  }

  .hero-home__copy {
    margin-inline-start: 0;
  }
}

@media (max-width: 47.999rem) {
  .hero-home {
    min-height: 43.75rem;
  }

  .hero-home__shade {
    background: linear-gradient(90deg, rgba(25, 43, 53, 0.94), rgba(25, 43, 53, 0.62));
  }

  .hero-home__inner {
    min-height: 43.75rem;
    align-items: flex-end;
    padding-block: 7rem 7rem;
  }

  .hero-home__eyebrow {
    align-items: flex-start;
  }

  .hero-home__reserved {
    width: calc(100% - 32px);
  }
}

@media (max-width: 30rem) {
  .hero-home__actions {
    display: grid;
  }

  .hero-home__actions .button {
    width: 100%;
  }
}