:root {
  --ink: #0f1311;
  --green: #2fbf6b;
  --paper: #ecf2e9;
  --pad: clamp(20px, 6vw, 96px);
  --heavy: "Archivo Black", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--heavy);
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: 4vw;
  min-height: 100vh;
  min-height: 100svh;
  padding: 90px var(--pad) 150px;
  overflow: hidden;
}

.tag {
  color: var(--green);
  font-size: clamp(28px, 3.6vw, 64px);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: .35em;
  animation: fade 1s .45s both;
}

h1 {
  font-size: clamp(76px, 13.5vw, 240px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.line { display: block; overflow: hidden; padding-bottom: .04em; }
.line > span { display: block; animation: up 1.1s cubic-bezier(.2, .7, 0, 1) both; }
.line + .line > span { animation-delay: .12s; }

.crest {
  width: 100%;
  max-width: 440px;
  justify-self: center;
  animation: fade 1.4s .3s both;
}

.crest-text {
  fill: var(--paper);
  font: 400 15px var(--heavy);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.crest-r { fill: var(--ink); font: 400 54px var(--heavy); }

.pill {
  position: absolute;
  left: var(--pad);
  bottom: 7vh;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 15px 26px;
  border-radius: 14px;
  background: var(--green);
  color: var(--ink);
  font-size: clamp(14px, 1.4vw, 19px);
  line-height: 1;
  text-transform: uppercase;
  animation: fade 1s .7s both;
}

.arrow {
  position: relative;
  width: clamp(70px, 10vw, 140px);
  height: 1.5px;
  background: currentColor;
}

.arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: translate(-100%, -50%);
}

.arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@keyframes up { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 899px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 34px;
    padding: 60px var(--pad);
  }
  .crest { max-width: 220px; justify-self: start; }
  .pill { position: static; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}