.hero {
  position: relative;
  padding: clamp(60px, 11vw, 140px) 0 clamp(80px, 13vw, 160px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.hero-eyebrow .badge {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.hero-eyebrow .years {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mint);
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(58px, 11vw, 184px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.display em {
  font-style: italic;
  color: var(--mint);
}

.display .stack {
  display: block;
}

.display .indent {
  padding-left: clamp(0px, 14vw, 200px);
}

.hero-side {
  align-self: end;
  max-width: 380px;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--line);
}

.hero-side p {
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.hero-side .meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero-side .meta dt {
  color: var(--ink-mute);
}

.hero-side .meta dd {
  color: var(--ink);
}

.hero-mark {
  position: absolute;
  top: 8%;
  right: -6vw;
  width: 52vw;
  max-width: 760px;
  opacity: 0.055;
  transform: rotate(-8deg);
  filter: blur(0.5px);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  bottom: -360px;
  left: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(95, 226, 180, 0.22), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.4fr 0.8fr;
  }
}