/* innolyceum-header-unification-v1 */
/* Shared official-site header. Load after each site's existing stylesheet. */
:root {
  --site-header-height: 76px;
  --site-header-ink: #0b0d11;
  --site-header-blue: #4665ff;
}

html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
body.subscription-page { padding-top: var(--site-header-height) !important; }
.n-page-enter,
.solutions-site > main { padding-top: var(--site-header-height) !important; }

.n-header {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 200 !important;
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr) 178px !important;
  grid-template-rows: 76px !important;
  align-items: center !important;
  justify-content: normal !important;
  column-gap: clamp(16px, 1.6vw, 28px) !important;
  row-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--site-header-height) !important;
  min-height: 0 !important;
  padding: 0 clamp(24px, 2.1vw, 40px) !important;
  color: var(--site-header-ink) !important;
  background: rgba(248, 249, 251, .97) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 11, 13, .12) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px #14182409 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
.n-header > .n-brand-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.n-header .n-logo { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
.n-header .n-logo-mark { flex: none !important; width: 38px !important; height: 38px !important; }
.n-header .n-logo-mark svg { display: block !important; width: 100% !important; height: 100% !important; }
.n-header .n-logo-type { display: grid !important; gap: 3px !important; text-align: left !important; }
.n-header .n-logo-type strong { color: #0b0d11 !important; font-size: 17px !important; font-weight: 720 !important; line-height: 1 !important; letter-spacing: .02em !important; }
.n-header .n-logo-type small { color: #5e6573 !important; font-size: 8px !important; font-weight: 720 !important; line-height: 1 !important; letter-spacing: .28em !important; }

.n-header > #primary-navigation,
.n-header > #primary-navigation.is-open {
  box-sizing: border-box !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 76px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.n-header > #primary-navigation > .n-nav-group {
  position: relative !important;
  display: flex !important;
  align-self: stretch !important;
  align-items: stretch !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.n-header > #primary-navigation > .n-nav-group > a {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #373b45 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
.n-header > #primary-navigation > .n-nav-group > a::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  inset: auto 0 16px !important;
  height: 2px !important;
  margin: 0 !important;
  background: var(--site-header-blue) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .2s ease !important;
}
.n-header > #primary-navigation > .n-nav-group > a:is(:hover, .is-active, [aria-current="page"]) { color: #101217 !important; }
.n-header > #primary-navigation > .n-nav-group > a:is(:hover, .is-active, [aria-current="page"])::after { transform: scaleX(1) !important; }

.n-header > .n-header-cta {
  box-sizing: border-box !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: none !important;
  width: 178px !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 9px 0 16px !important;
  color: #fff !important;
  background: var(--site-header-ink) !important;
  border: 1px solid var(--site-header-ink) !important;
  border-radius: 10px !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.n-header > .n-header-cta > span {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--site-header-ink) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.n-header > .n-menu,
.n-header > #primary-navigation > .n-mobile-nav-cta { display: none !important; }
.n-header :is(.n-brand-button, .n-header-cta, .n-nav-group > a):focus-visible { outline: 2px solid var(--site-header-blue) !important; outline-offset: 4px !important; }

/* Existing flyout contents retain their site-specific styling. */
.n-header #primary-navigation .n-nav-flyout {
  display: grid !important;
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: 50% !important;
  right: auto !important;
  z-index: 210 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) !important;
}
.n-header #primary-navigation .n-nav-group:is(:hover, :focus-within) > .n-nav-flyout {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

/* Smaller desktop windows keep all seven destinations on a second row. */
@media (max-width: 1199px) {
  :root { --site-header-height: 124px; }
  .n-header { grid-template-columns: minmax(0, 1fr) 178px !important; grid-template-rows: 68px 56px !important; column-gap: 20px !important; }
  .n-header > .n-header-cta { grid-column: 2 !important; }
  .n-header > #primary-navigation,
  .n-header > #primary-navigation.is-open {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1.3fr repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 55px !important;
    gap: 0 clamp(4px, 1vw, 12px) !important;
    height: 56px !important;
    border-top: 1px solid #0a0b0d0b !important;
  }
  .n-header > #primary-navigation > .n-nav-group > a { font-size: clamp(12px, 1.4vw, 14px) !important; }
  .n-header > #primary-navigation > .n-nav-group > a::after { inset: auto 8px 7px !important; }
}

/* Phones use two compact rows of links; the first row has three items. */
@media (max-width: 700px) {
  :root { --site-header-height: 156px; }
  .n-header { grid-template-columns: minmax(0, 1fr) 156px !important; grid-template-rows: 64px 88px !important; column-gap: 12px !important; padding: 0 18px 4px !important; }
  .n-header .n-logo { gap: 8px !important; }
  .n-header .n-logo-mark { width: 34px !important; height: 34px !important; }
  .n-header .n-logo-type strong { font-size: 15px !important; }
  .n-header .n-logo-type small { font-size: 7px !important; }
  .n-header > .n-header-cta { width: 156px !important; height: 40px !important; min-height: 40px !important; padding: 0 8px 0 12px !important; gap: 8px !important; font-size: 12px !important; border-radius: 9px !important; }
  .n-header > .n-header-cta > span { flex-basis: 26px !important; width: 26px !important; height: 26px !important; font-size: 18px !important; }
  .n-header > #primary-navigation,
  .n-header > #primary-navigation.is-open { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, 44px) !important; height: 88px !important; gap: 0 4px !important; }
  .n-header > #primary-navigation > .n-nav-group:first-child { grid-column: span 2 !important; }
  .n-header > #primary-navigation > .n-nav-group > a { min-height: 44px !important; font-size: 12px !important; }
  .n-header > #primary-navigation > .n-nav-group > a::after { inset: auto 6px 4px !important; }
  .n-header #primary-navigation .n-nav-flyout { display: none !important; }
}

@media (max-width: 380px) {
  .n-header { padding-inline: 12px !important; column-gap: 8px !important; grid-template-columns: minmax(0, 1fr) 146px !important; }
  .n-header .n-logo { gap: 6px !important; }
  .n-header .n-logo-mark { width: 30px !important; height: 30px !important; }
  .n-header .n-logo-type strong { font-size: 14px !important; }
  .n-header .n-logo-type small { font-size: 6px !important; }
  .n-header > .n-header-cta { width: 146px !important; font-size: 11px !important; }
  .n-header > #primary-navigation > .n-nav-group > a { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .n-header *, .n-header *::after { transition: none !important; }
}