body.homepage,
body.blog-article-page {
  padding-bottom: 0;
}
.homepage .blog-index {
  margin-top: 68px;
}
.homepage-content {
  display: flow-root;
}
.puzzle-footer {
  position: relative;
  width: 100%;
  height: 30vh;
  height: 30svh;
  margin-top: 64px;
  background: #fff;
  opacity: 0.2;
}
.puzzle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.puzzle-piece {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  overflow: visible;
  transform-origin: 0 0;
  pointer-events: none;
}
.puzzle-footer__mark {
  --puzzle-logo-width: 144px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--puzzle-logo-width);
  height: calc(var(--puzzle-logo-width) * 0.7969375);
  color: var(--accent-blue);
}
@media (max-width: 640px) {
  .puzzle-footer {
    margin-top: 40px;
  }
  .puzzle-footer__mark {
    --puzzle-logo-width: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .puzzle-footer {
    opacity: 1;
  }
}

@media (min-width: 1100px) {
  .homepage .site-contact {
    position: sticky;
    bottom: max(28px, env(safe-area-inset-bottom));
    right: auto;
    width: fit-content;
    margin: 0 max(30px, env(safe-area-inset-right)) 0 auto;
  }
  .puzzle-footer {
    margin-top: 24px;
  }
}