@font-face {
  font-family: "Helvetica Neue LT Bold";
  src: url("assets/HelveticaNeueLTStd-Bd.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LT Black";
  src: url("assets/HelveticaNeueLTStd-Blk.otf") format("opentype");
  font-display: swap;
}

:root {
  --blue: #001ee5;
  --white: #f3f1f2;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  background: var(--blue);
  color: var(--white);
}

body {
  margin: 0;
  min-width: 280px;
  overflow-x: hidden;
  background: var(--blue);
  color: var(--white);
  font-family: "Helvetica Neue LT Bold", "Helvetica Neue", Arial, sans-serif;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--blue);
}

.lockup {
  position: absolute;
  top: 11.759%;
  left: 50%;
  width: min(34.9vw, 62.045vh);
  aspect-ratio: 670.083 / 588.778;
  transform: translateX(-50.15%);
}

.brand-lockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-block {
  position: absolute;
  top: 69.907%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.contact-button {
  display: flex;
  width: clamp(116px, 7.344vw, 141px);
  height: clamp(34px, 3.519vw, 38px);
  align-items: center;
  justify-content: center;
  padding: 3px 0 0;
  border: 2px solid var(--white);
  border-radius: 6px;
  background: var(--white);
  color: var(--blue);
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
  letter-spacing: -0.11em;
  line-height: 0.8;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

.contact-button:hover,
.contact-button:focus-visible {
  background: var(--blue);
  color: var(--white);
}

.contact-button:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

.early-access {
  margin-top: 6px;
  font-size: clamp(8px, 0.625vw, 12px);
  letter-spacing: -0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.partners {
  position: absolute;
  bottom: 9.37%;
  left: calc(50% + 14px);
  width: min(31.042vw, 596px);
  aspect-ratio: 596 / 79.781;
  transform: translateX(-50%);
}

.partners img {
  display: block;
}

.team-boulder {
  position: absolute;
  top: 26.59%;
  left: 0;
  width: 16.12%;
}

.boulder-mob {
  position: absolute;
  inset: 9.02% auto auto 20.22%;
  width: 37.13%;
  height: 86.94%;
}

.boulder-wordmark {
  position: absolute;
  top: 14%;
  left: 0;
  width: 29%;
  transform: rotate(-2.87deg);
}

.boulder-hand {
  position: absolute;
  top: 18%;
  left: 28%;
  width: 34%;
  transform: rotate(-21.68deg);
}

.boulder-mob-type {
  position: absolute;
  top: 28.9%;
  left: 61.96%;
  width: 41.54%;
}

.cake-cluster {
  position: absolute;
  inset: 0 auto auto 61.745%;
  width: 23.66%;
  height: 100%;
}

.cake-cluster > img {
  position: absolute;
  inset: 0 auto auto 0;
  width: 42.93%;
}

.cake-type {
  position: absolute;
  top: 25.22%;
  left: 9.46%;
  width: 25.33%;
}

.no-mob {
  position: absolute;
  top: 34.24%;
  left: 56.66%;
  width: 42.88%;
}

.way-more {
  position: absolute;
  top: 80.22%;
  left: 28.37%;
  font-family: "Helvetica Neue LT Black", Impact, sans-serif;
  font-size: min(0.358vw, 6.88px);
  letter-spacing: -0.14em;
  line-height: 0.71;
  text-transform: uppercase;
  white-space: nowrap;
}

.social-marks {
  position: absolute;
  top: 40.11%;
  right: 0;
  width: 10.57%;
}

footer {
  display: grid;
  min-height: 127px;
  place-items: start center;
  padding-top: 2px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
}

@media (max-aspect-ratio: 1 / 1) {
  .hero {
    min-height: 100svh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(28px, 5.5svh, 56px);
    padding: max(42px, 7svh) 20px max(24px, 4svh);
  }

  .lockup,
  .contact-block,
  .partners {
    position: relative;
    inset: auto;
    transform: none;
  }

  .lockup {
    align-self: end;
    justify-self: center;
    width: min(94vw, 520px);
    margin-bottom: 24px;
  }

  .contact-block {
    justify-self: center;
  }

  .contact-button {
    width: 141px;
    height: 38px;
    font-size: 18px;
  }

  .early-access {
    font-size: 12px;
  }

  .partners {
    justify-self: center;
    width: min(92vw, 596px);
  }

  .way-more {
    font-size: min(1.06vw, 6.88px);
  }

  footer {
    min-height: 72px;
    align-items: start;
    padding: 4px 16px 24px;
    font-size: 14px;
  }
}

@media (max-width: 420px) and (max-height: 740px) {
  .hero {
    gap: 22px;
    padding-top: 24px;
  }

  .lockup {
    width: min(86vw, 350px);
    margin-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-button {
    transition: none;
  }
}