.floating-contact {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;

  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;

  border: 1px solid rgba(74, 32, 28, 0.12);
  border-radius: 50%;

  background: var(--cinnamon);
  color: var(--white);

  box-shadow: 0 10px 28px rgba(74, 32, 28, 0.24);

  text-decoration: none;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.floating-contact svg {
  display: block;
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-contact:hover,
.floating-contact:focus-visible {
  background: var(--bark);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(74, 32, 28, 0.28);
}

@media (max-width: 760px) {
  .floating-contact {
    right: 12px;
    bottom: 12px;
    width: 49px;
    height: 49px;
  }

  .floating-contact svg {
    width: 21px;
    height: 21px;
  }
}

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