.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-7);
}

.hero__band {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--c-petrol) 92%, transparent) 0%, color-mix(in srgb, var(--c-petrol-mid) 78%, transparent) 48%, color-mix(in srgb, var(--c-saffron) 55%, transparent) 100%),
    url("/assets/hero-duotone-split.png") center / cover no-repeat;
  color: var(--c-sage);
  padding: var(--space-8) 0 var(--space-7);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.hero__grid {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-7);
  align-items: start;
  position: relative;
  z-index: 2;
}

.hero__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--c-saffron-soft);
  margin-bottom: var(--space-3);
}

.hero h1 {
  color: var(--c-white);
  margin-bottom: var(--space-4);
}

.hero__lead {
  font-size: 1.125rem;
  max-width: 42ch;
  color: color-mix(in srgb, var(--c-sage) 92%, white);
}

.hero__criteria {
  background: color-mix(in srgb, var(--c-ink) 28%, transparent);
  padding: var(--space-5);
}

.hero__criteria h2 {
  color: var(--c-saffron-soft);
  font-size: 1rem;
  font-family: var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.hero__criteria ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: crit;
}

.hero__criteria li {
  counter-increment: crit;
  padding: var(--space-3) 0;
  border-bottom: 0;
  color: var(--c-sage);
  text-indent: 0;
  padding-left: 0;
  max-width: none;
}

.hero__criteria li::before {
  content: counter(crit, decimal-leading-zero);
  display: inline-block;
  width: 2.2rem;
  color: var(--c-saffron);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hero__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__shape {
  position: absolute;
  opacity: 0.35;
  animation: drift 18s ease-in-out infinite alternate;
}

.hero__shape--a {
  width: 18rem;
  height: 18rem;
  background: var(--c-saffron);
  border-radius: 50%;
  top: -4rem;
  right: -3rem;
  filter: blur(2px);
}

.hero__shape--b {
  width: 12rem;
  height: 12rem;
  background: var(--c-sage);
  top: 40%;
  left: -4rem;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation-delay: -6s;
}

.hero__meta {
  margin-top: var(--space-5);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-sage) 80%, white);
}

.hero__notice {
  margin-top: var(--space-4);
  padding: var(--space-3) 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-sage) 85%, white);
  max-width: 50ch;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(1.5rem, -1rem, 0) rotate(8deg);
  }
}

@media (max-width: 800px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hero__band {
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
    padding: var(--space-7) 0 var(--space-6);
  }
}