/* Layered hero intro */
.layered-stage {
  min-height: 72vh;
  padding: 36px 0;
}

.layered-wrap {
  display: grid;
  min-height: 64vh;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
  gap: clamp(24px, 5vw, 68px);
  align-items: center;
}

.layer-stack {
  position: relative;
  min-height: clamp(360px, 46vw, 640px);
}

.layer-card {
  position: absolute;
  inset: auto auto 0 0;
  width: 76%;
  min-height: 72%;
  border: 1px solid rgba(17, 19, 21, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55), transparent 24%),
    linear-gradient(140deg, var(--from), var(--to));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.layer-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(17, 19, 21, 0.18);
  border-radius: 8px;
}

.layer-card:nth-child(2) {
  inset: 10% 0 auto auto;
  width: 58%;
  min-height: 48%;
}

.layer-card:nth-child(3) {
  inset: 8% auto auto 8%;
  width: 34%;
  min-height: 28%;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.layered-copy h1 {
  font-size: clamp(46px, 8vw, 116px);
}

@media (max-width: 830px) {
  .layered-wrap {
    grid-template-columns: 1fr;
  }

  .layer-stack {
    order: -1;
    min-height: 420px;
  }
}