/* Uses the supplied Teko Regular face defined in the shared stylesheet. */

.v4-hero .hero-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.25vw, 18px);
  width: 100%;
  color: var(--white);
  text-align: center;
}

.v4-hero .hero-identity__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.8vw, 13px);
  margin: 0;
  font: 400 clamp(9px, 2.4vw, 12px)/1.2 var(--body);
  letter-spacing: .065em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* More specific than the legacy .v4-hero h1 rule, including on mobile. */
.v4-hero .hero-identity__name {
  position: relative;
  flex: none;
  width: max-content;
  margin: 0;
  padding: 0;
  font: 400 min(25.25965vw, 237.221px)/.626 var(--display);
  font-synthesis: none;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.v4-hero .hero-identity__name sup {
  position: absolute;
  inset: .04em auto auto calc(100% + .15em);
  font: 400 .12em/1 var(--body);
  letter-spacing: 0;
}

.v4-hero .hero-identity__tagline {
  margin: 0;
  font: 400 clamp(9px, 2.4vw, 12px)/1.2 var(--mono);
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.v4-hero .v4-hero__content > span {
  margin-top: clamp(34px, 4vw, 46px);
}

.v4-hero .v4-actions {
  margin-top: clamp(32px, 3.5vw, 42px);
}

/* Keep the supporting statement in complete phrases. */
.v4-hero .hero-statement > span {
  display: inline-block;
  white-space: nowrap;
}

.v4-hero .v4-hero__actions {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 68px;
  width: min(620px, calc(100% - 40px));
  margin: 0;
  transform: translateX(-50%);
}

@media (max-width: 560px) {
  .v4-hero .v4-hero__content > span {
    margin-top: 34px;
  }

  .v4-hero .v4-actions {
    margin: 0;
  }

  .v4-hero .v4-hero__actions {
    bottom: 66px;
    width: calc(100% - 32px);
  }

  .v4-hero .hero-statement > span:last-child {
    display: block;
  }
}

/* Supplied Teko Regular's visible capitals occupy .626em. Its baseline places
   them .0715em above that line box; this offset centres the visible ink
   consistently, including Safari versions without font metric overrides. */
.v4-hero .hero-identity__letters {
  display: block;
  position: relative;
  top: .0715em;
}

.v4-hero .v4-hero__content {
  animation: none;
}

/* Keep brand and actions in normal flow, including short phone screens. */
.v4-hero{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:120px 0 88px;gap:56px}
.v4-hero .v4-hero__content{flex:none;align-self:center;margin:auto 0 0;padding-top:24px}
.v4-hero .v4-hero__actions{position:relative;left:auto;bottom:auto;transform:none;margin:auto 0 0;flex-wrap:wrap;row-gap:22px}
@media(max-width:560px){
  .v4-hero{padding-top:104px;gap:60px}
  .v4-hero .v4-hero__actions{margin-top:auto;column-gap:20px}
}

.v4-hero .hero-identity[data-reveal="pending"] {
  opacity: 0;
}

.v4-hero .hero-identity[data-reveal="visible"] {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .v4-hero .hero-identity[data-reveal] {
    opacity: 1;
    transition: none;
  }
}