/* Hero: centred copy over the ribbon. */

.hero {
  position: relative;
  z-index: 1;
  display: grid;
}
.hero > .frame {
  position: relative;
  padding-block: var(--s6);
}
.hero-copy {
  display: grid;
  gap: var(--s3);
  position: relative;
  z-index: 2;
}
.hero-copy .h1 { margin-top: calc(var(--s1) * -1); }
.hero-actions { display: flex; gap: var(--s1); margin-top: var(--s1); }

@media (max-width: 860px) {
  .hero > .frame { padding-block: var(--s5) 0; }
}