/* Shared mobile contact bar for the home page and all subpages. */
.mobile-quicklinks,
.sub-mobile-quicklinks {
  background: rgba(18, 18, 18, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .30),
    0 4px 10px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  padding: 6px;
  gap: 2px;
}

.mql-btn,
.sub-mql-btn {
  color: #fff !important;
  border-right: 0;
  border-radius: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mql-btn svg,
.sub-mql-btn svg {
  color: #fff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .38));
}

.mql-btn:active,
.sub-mql-btn:active {
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(-2px) scale(1.03);
}

@media (max-width: 768px) {
  .mobile-quicklinks,
  .sub-mobile-quicklinks {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    border-radius: 18px;
  }

  .mql-btn,
  .sub-mql-btn {
    padding: 8px 3px 7px;
    gap: 4px;
    font-size: .59rem;
    letter-spacing: .04em;
  }

  .mql-btn svg,
  .sub-mql-btn svg {
    width: 22px;
    height: 22px;
  }
}