/* Shared header styling for the main site and portfolio. */
.ws3-nav {
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  font-family: Poppins, Arial, sans-serif;
}
.ws3-nav > a:first-child { display: block; flex-shrink: 0; }
.ws3-nav img { display: block; height: 40px; width: auto; }
.ws3-nav nav { display: none; }
.ws3-nav ul { display: none; list-style: none; padding: 0; margin: 0; }
.ws3-nav a { color: #fff; text-decoration: none; }
.ws3-nav li { font-size: 20px; font-weight: 500; line-height: 28px; }
.ws3-nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.ws3-nav a:focus-visible { outline: 2px solid #b3e6fa; outline-offset: 5px; }
.ws3-nav a.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 6px 24px;
  border: 0;
  border-radius: 9999px;
  background: #1d5be5;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
}
.ws3-nav a.button:hover, .ws3-nav a.button:focus-visible { background: #2882e6; }
.ws3-nav a.button:active { background: #184ec5; }
.ws3-nav a.mobile-contact { padding-inline: 20px; font-size: 16px; line-height: 24px; }
@media (min-width: 920px) {
  .ws3-nav { align-items: center; }
  .ws3-nav img { height: 32px; }
  .ws3-nav nav { display: block; }
  .ws3-nav ul { display: flex; align-items: center; gap: 32px; }
  .ws3-nav a.mobile-contact { display: none; }
}
@media (min-width: 1240px) {
  .ws3-nav ul { gap: 48px; }
}

@media (max-width: 480px) {
  .ws3-nav { gap: 12px; }
  .ws3-nav img { height: 28px; }
  .ws3-nav a.mobile-contact { padding-inline: 16px; font-size: 14px; }
}