.header .nav-links a,
.header .nav-dropdown-trigger,
.header .nav-gallery-btn {
  font-family: "Source Sans 3", "Helvetica Neue", system-ui, sans-serif !important;
  font-size: 14.4px !important;
  font-weight: 500 !important;
  line-height: 23.04px !important;
  letter-spacing: 0.72px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* Header layout hardening: keep the logo isolated from nav pills and
   switch to the existing mobile drawer before the desktop menu crowds it. */
.header .header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(1rem, 1.8vw, 1.85rem) !important;
  min-width: 0;
}

.header .logo {
  position: relative;
  z-index: 2;
  flex: 0 0 clamp(148px, 13vw, 190px) !important;
  width: clamp(148px, 13vw, 190px) !important;
  flex-shrink: 0 !important;
  margin-right: clamp(0.9rem, 1.8vw, 1.6rem) !important;
}

.header.scrolled .logo {
  flex-basis: clamp(144px, 12vw, 184px) !important;
  width: clamp(144px, 12vw, 184px) !important;
}

.header .logo-img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 80px !important;
  object-fit: contain !important;
}

.header.scrolled .logo-img {
  width: 100% !important;
  max-height: 72px !important;
}

.header .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  gap: clamp(0.9rem, 1.4vw, 1.65rem) !important;
}

.header .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: clamp(0.2rem, 0.7vw, 0.8rem) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header .nav-links li,
.header .nav-dropdown,
.header .nav-gallery-btn {
  flex: 0 0 auto;
}

.header .nav-links a,
.header .nav-dropdown-trigger {
  padding: 0.24rem 0.78rem !important;
}

.header .nav-gallery-btn {
  min-width: 136px !important;
  padding: 0.56rem 1.1rem !important;
  margin-left: clamp(0.35rem, 0.8vw, 0.9rem) !important;
}

.header .mobile-menu-btn {
  display: none !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

@media (max-width: 1400px) {
  .header .header-container {
    gap: 0.95rem !important;
  }

  .header .logo {
    margin-right: 0.95rem !important;
  }

  .header .nav {
    gap: 0.9rem !important;
  }

  .header .nav-links {
    gap: 0.12rem !important;
  }

  .header .nav-links a,
  .header .nav-dropdown-trigger,
  .header .nav-gallery-btn {
    font-size: 13.6px !important;
    letter-spacing: 0.05em !important;
  }

  .header .nav-links a,
  .header .nav-dropdown-trigger {
    padding: 0.22rem 0.62rem !important;
  }

  .header .nav-gallery-btn {
    min-width: 124px !important;
    padding: 0.54rem 0.96rem !important;
  }
}

@media (max-width: 1220px) {
  .header .header-container {
    gap: 0.75rem !important;
    height: 82px !important;
  }

  .header.scrolled .header-container {
    height: 72px !important;
  }

  .header .nav {
    display: none !important;
  }

  .header .logo {
    margin-right: 0 !important;
  }

  .header .logo,
  .header.scrolled .logo {
    flex-basis: clamp(146px, 24vw, 184px) !important;
    width: clamp(146px, 24vw, 184px) !important;
  }

  .header .logo-img,
  .header.scrolled .logo-img {
    width: 100% !important;
    max-height: 74px !important;
  }

  .header .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 78, 168, 0.12) !important;
    background: #ffffff !important;
    color: var(--color-accent-primary) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
  }
}

@media (max-width: 640px) {
  .header .header-container {
    height: 76px !important;
  }

  .header.scrolled .header-container {
    height: 68px !important;
  }

  .header .logo,
  .header.scrolled .logo {
    flex-basis: clamp(136px, 42vw, 164px) !important;
    width: clamp(136px, 42vw, 164px) !important;
  }

  .header .logo-img,
  .header.scrolled .logo-img {
    max-height: 66px !important;
  }

  .header .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
  }
}