/*
 * Lock In Infusions: home page only. Loaded after site.css, which explains
 * the --f / --m / --u sizing units used below.
 */

:root {
  /* Empty space between the headline block and the footer. The original has
     two empty sections here; lower these two numbers to trim the gap. */
  --blank-space-phone: 400;
  --blank-space-desktop: 900;
}

.hero {
  padding: calc(48 * var(--f)) calc(24 * var(--m)) calc(49 * var(--f));
}

.hero__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1336 / 486;
  object-fit: cover;
}

.vision {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(40 * var(--f)) calc(33 * var(--m)) calc(36 * var(--f)) calc(15 * var(--m));
}

.vision__title {
  font-size: calc(24 * var(--f));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--tight-sans);
}

.vision__lede {
  margin-top: calc(11 * var(--f));
  font-size: calc(32 * var(--f));
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tight-sans);
}

.vision .icon-link {
  margin-top: calc(29 * var(--f));
}

.blank-space {
  height: calc(var(--blank-space-phone) * var(--f));
}

/* ================= Desktop: 1024px and wider ================= */

@media (min-width: 1024px) {
  .hero {
    padding: calc(55 * var(--u)) calc(46 * var(--u)) calc(50 * var(--u)) calc(58 * var(--u));
  }

  .vision {
    padding: calc(54 * var(--u)) calc(28 * var(--u)) calc(55 * var(--u));
  }

  /* On desktop the "Our Vision" link sits above the headline */
  .vision .icon-link {
    order: -1;
    margin-top: 0;
  }

  .vision__title {
    align-self: stretch;
    margin-top: calc(37 * var(--u));
    font-size: calc(100.174 * var(--u));
    text-align: right;
  }

  .vision__lede {
    max-width: calc(907 * var(--u));
    margin-top: calc(55 * var(--u));
    font-size: calc(81.9605 * var(--u));
  }

  .blank-space {
    height: calc(var(--blank-space-desktop) * var(--u));
  }
}