/* Hero (DESIGN 5.1): type only, 100svh, final static state. Motion hooks: [data-split-lines] .line > span, .arch */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
}
.hero .arch { z-index: -1; } /* behind everything; no element is covered by it */
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: 15svh;        /* the headline starts 15% below the top */
  padding-bottom: 28px;      /* bottom row sits 28px above the edge */
}
.hero__title {
  font-size: var(--step-hero);
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.hero__title .line {
  display: block;
  white-space: nowrap;       /* a headline line never wraps */
  overflow: hidden;          /* mask for the rise */
  padding-block: 0.05em;
  margin-block: -0.05em;
}
.hero__title .line > span {
  display: inline-block;
  padding-right: 0.06em;     /* keeps the negative tracking from clipping the last letter */
}
.hero__title .line:nth-child(1) { text-align: left; }
.hero__title .line:nth-child(2) { text-align: right; }

.hero__row {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  justify-content: space-between;
  gap: 32px;
  padding-top: 48px;
}
.hero__sentence {
  max-width: 38ch; /* spec: max 44ch; narrower keeps the arch rim clear of the last line */
  font-size: var(--step-lead);
  line-height: 1.4;
}

/* Tablet and phone: the sentence follows the headline (no hole), the action and the fire hold the bottom */
/* tablet and phone: the words and the action read as one block; the bottom of the screen belongs to the fire */
@media (max-width: 1023px) {
  .hero, .hero__inner { min-height: 0; }
  .hero__inner { padding-bottom: 30svh; }
  .hero__title { font-size: 15.6vw; }
  .hero__title .line:nth-child(2) { text-align: left; }
  .hero__row { display: contents; }
  .hero__sentence { margin-top: 40px; max-width: 34ch; }
  .hero__cta { margin-top: 40px; align-self: flex-start; }
  .hero .arch { --arch-crown: 20svh; }
}

@media (max-width: 720px) {
  .hero__inner { padding-top: 14svh; }
  .hero__title { font-size: 15.2vw; }
  .hero__title .line:nth-child(2) { text-align: left; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 24px; }
  .hero__sentence { font-size: 1.125rem; } /* 18px: the plain words under the name */
  .hero__cta { width: 100%; align-self: stretch; margin-top: 32px; }
}