/* Header fit polish: keeps the right-most Contact link fully inside the rounded banner. */

.site-header {
  width: min(1280px, calc(100% - 36px));
  gap: 18px;
}

.site-logo {
  flex: 0 0 auto;
}

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 4px;
}

.site-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Tighten the navigation gently before it reaches the edge of the banner. */
@media (max-width: 1180px) and (min-width: 1081px) {
  .site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .site-logo {
    font-size: clamp(23px, 2.25vw, 30px);
  }

  .site-nav {
    gap: 2px;
    font-size: 11px;
    letter-spacing: 0.10em;
  }

  .site-nav a {
    padding: 9px 9px;
  }
}

/* Move to the compact wrapped header before any navigation item can hang outside. */
@media (max-width: 1080px) {
  .site-header {
    border-radius: 28px;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .site-header {
    width: min(100% - 28px, 1280px);
  }
}