/* Holmes contact links */
:root {
  --h-header-offset: 166px;
}

html {
  scroll-padding-top: var(--h-header-offset);
}

.h-social-header {
  border-top: 1px solid #ffffff12;
  background: #001740;
}

.h-social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  padding-block: 4px;
}

.h-social-follow {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.h-social-label {
  color: #b7c7de;
  font-size: 12px;
  white-space: nowrap;
}

.h-social-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.h-social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #d9e3f2;
  background: transparent;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.h-social-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: currentColor;
  flex-shrink: 0;
}

.h-social-link:hover {
  color: #001740;
  background: #f6c60a;
  border-color: #f6c60a;
  transform: translateY(-2px);
}

.h-social-link:active {
  transform: translateY(0);
}

.h-social-link:focus-visible,
.h-social-phone:focus-visible,
.h-footer-phone:focus-visible {
  outline: 3px solid #f6c60a;
  outline-offset: 3px;
}

.h-social-phone {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 44px;
  flex-shrink: 0;
  color: #fff;
  line-height: 1.5;
}

.h-social-phone > span {
  color: #b7c7de;
  font-size: 11px;
}

.h-social-phone > bdi {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}

.h-social-phone:hover > bdi {
  color: #f6c60a;
}

.h-footer-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding-block: 25px 31px;
  border-top: 1px solid #213653;
}

.h-footer-social-title {
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 500;
  color: #e5edf8;
}

.h-footer-contact .h-social-link {
  border-color: #314664;
}

.h-footer-contact .h-social-link:hover {
  border-color: #f6c60a;
}

.h-footer-phone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 22px;
  border: 1px solid #3b4c65;
  border-radius: 10px;
  color: #fff;
  min-width: 0;
  transition: border-color .25s ease, background .25s ease;
}

.h-footer-phone > .h-social-icon {
  width: 27px;
  height: 27px;
  color: #f6c60a;
}

.h-footer-phone small {
  display: block;
  color: #b5c4da;
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 3px;
}

.h-footer-phone bdi {
  display: block;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}

.h-footer-phone:hover {
  border-color: #f6c60a;
  background: #f6c60a08;
}

@media (max-width: 1050px) {
  :root { --h-header-offset: 155px; }
}

@media (max-width: 760px) {
  :root { --h-header-offset: 148px; }
  .h-social-follow { gap: 12px; }
  .h-social-phone { gap: 10px; }
  .h-social-phone > span { font-size: 10px; }
  .h-social-phone > bdi { font-size: 14px; }
}

@media (max-width: 650px) {
  .h-social-row { justify-content: center; }
  .h-social-header .h-social-label,
  .h-social-header .h-social-phone { display: none; }
  .h-social-follow { gap: 0; }
  .h-footer-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 24px 28px;
  }
  .h-footer-phone {
    justify-self: start;
    width: min(100%, 320px);
    padding: 14px 19px;
  }
  .h-footer-phone bdi { font-size: 22px; }
}

@media (max-width: 360px) {
  .h-social-links { gap: 4px; }
  .h-footer-phone { gap: 13px; padding-inline: 15px; }
  .h-footer-phone bdi { font-size: 21px; }
}

html[data-motion='paused'] .h-social-link,
html[data-motion='paused'] .h-footer-phone {
  transition: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .h-social-link,
  .h-footer-phone { transition: none; transform: none; }
}

@media print {
  .h-footer-contact { color: #001740; border-color: #cad4e2; }
  .h-footer-contact .h-social-links { display: none; }
  .h-footer-social-title,
  .h-footer-phone,
  .h-footer-phone small { color: #001740; }
  .h-footer-phone { border-color: #cad4e2; }
}
