/* Social icons — explicit sizing/layout to prevent browser/hosting CSS conflicts. */
.hero-socials,
footer .socials {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.hero-socials {
  gap: 12px !important;
  margin: 0 0 28px !important;
}
.hero-socials a {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
}
.hero-socials svg {
  width: 19px !important;
  min-width: 19px !important;
  max-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
  display: block !important;
  flex: 0 0 19px !important;
}
footer .socials {
  gap: 14px !important;
  margin-left: auto !important;
  margin-right: 28px !important;
  width: auto !important;
  order: initial !important;
}
footer .socials a {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
}
footer .socials svg {
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  display: block !important;
  flex: 0 0 17px !important;
}
@media (max-width: 800px) {
  .hero-socials { margin-bottom: 24px !important; }
  footer { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; }
  footer .socials { width: auto !important; margin: 0 !important; order: initial !important; }
}