/* Supplied logo and approved decorative section watermarks. */
.brand-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand-logo-link {
  width: 196px;
  max-width: 100%;
}

.brand-logo-link > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 674 / 218;
}

.wordmark--footer.brand-logo-link {
  width: 240px;
}

.home .hero,
.home .closing-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home .closing-cta {
  background-image: none;
}

.home .hero::before,
.home .closing-cta::before {
  position: absolute;
  z-index: -1;
  width: var(--brand-mark-width);
  aspect-ratio: 205 / 218;
  content: "";
  pointer-events: none;
  background-image: url("../images/and-mile-logo-source.png");
  background-repeat: no-repeat;
  /* Original 1254px art board: mark crop x154, y262, w205, h218. */
  background-size: calc(var(--brand-mark-width) * 1254 / 205) auto;
  background-position: calc(var(--brand-mark-width) * -154 / 205) calc(var(--brand-mark-width) * -262 / 205);
}

.home .hero::before {
  --brand-mark-width: clamp(320px, 32vw, 460px);
  right: -60px;
  top: -90px;
  filter: url("#and-mile-mark-red");
  opacity: 0.045;
}

.home .closing-cta::before {
  --brand-mark-width: 220px;
  left: 8px;
  bottom: -24px;
  filter: url("#and-mile-mark-white");
  opacity: 0.08;
}

@media (max-width: 767px) {
  .brand-logo-link {
    width: 160px;
  }

  .home .hero::before {
    --brand-mark-width: 240px;
    right: -65px;
    top: -60px;
    opacity: 0.035;
  }

  .home .closing-cta::before {
    --brand-mark-width: 160px;
    left: 6px;
    bottom: -18px;
  }
}