.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}

.site-header--solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(11, 16, 48, 0.06), 0 18px 40px -30px rgba(11, 16, 48, 0.35);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 92px;
}

.site-header--solid .site-header__bar {
  height: 78px;
  transition: height 0.4s var(--ease-out);
}

.site-header__logo img {
  height: 54px;
  width: auto;
  transition: opacity 0.3s ease;
}

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__nav li {
  position: relative;
}

.site-header__nav a {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
}

.site-header--solid .site-header__nav a {
  color: var(--color-ink);
}

.site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  /* Matches .active's text colour below. --color-blue (the brighter brand
     blue) reads fine as a thin line, but only hits 3.86:1 as text against
     the solid white header — under the 4.5:1 AA minimum at this size/weight
     — so the text stays on --color-blue-text and the underline now follows
     it instead of the other way around. */
  background: var(--color-blue-text);
  transition: right 0.3s var(--ease-out);
}

.site-header__nav a:hover::after,
.site-header__nav a.active::after {
  right: 0;
}

.site-header__nav a.active {
  color: var(--color-blue-text);
}

.site-header--solid .site-header__nav a.active {
  color: var(--color-blue-text);
}

.site-header__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.has-sub:hover .site-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header__submenu a {
  color: var(--color-ink) !important;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
}

.site-header__submenu a:hover {
  background: rgba(8, 126, 255, 0.08);
  color: var(--color-blue-text) !important;
}

.site-header__submenu a::after {
  display: none;
}

/* Catalog download, last item in the nav. A filled pill so it reads as an
   action rather than another page link — no underline sweep, no active state.

   The fill flips with the header: over the dark hero the brand gradient sat
   navy-on-navy and went muddy, so there it is a solid white pill (which is
   also the strongest contrast available against that background), and it
   switches to the brand gradient once the header turns solid white.

   The *text* colours are set further down, scoped to `.site-header__nav`,
   and they have to be: `.site-header__nav a` is a class+element selector, so
   it outranks a lone `.site-header__catalog` class and quietly captures this
   pill along with the plain page links. Setting colour here instead looks
   right but never renders — see the note above those rules. */
.site-header__catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-navy);
  box-shadow: 0 8px 22px -10px rgba(2, 8, 26, 0.65);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
              background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.site-header__catalog:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(2, 8, 26, 0.75);
}

/* Ends at --color-blue-text rather than --color-blue: white text over the
   bright end of --gradient-brand only reached 3.9:1, under the 4.5:1 minimum,
   so the right-hand side of the pill washed out. The deeper stop holds 5.4:1
   the whole way across and still reads as the brand sweep. */
.site-header--solid .site-header__catalog {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-text) 100%);
  color: #ffffff;
  box-shadow: 0 10px 26px -12px rgba(8, 126, 255, 0.75);
}

.site-header--solid .site-header__catalog:hover {
  box-shadow: 0 16px 32px -12px rgba(8, 126, 255, 0.9);
}

.site-header__catalog:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

.site-header__catalog::after {
  display: none;
}

.site-header__catalog svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---- "Coming soon" state (no PDF published yet) ---- */
/* Deliberately quiet: it holds the final layout without inviting a click. */
.site-header__catalog--soon {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  cursor: not-allowed;
}

.site-header--solid .site-header__catalog--soon {
  background: rgba(23, 47, 86, 0.06);
  color: var(--color-ink-soft);
  border-color: rgba(23, 47, 86, 0.18);
}

.site-header__catalog--soon:hover,
.site-header--solid .site-header__catalog--soon:hover {
  transform: none;
  box-shadow: none;
}

.site-header__catalog--soon em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.site-header--solid .site-header__catalog--soon em {
  background: rgba(23, 47, 86, 0.12);
}

/* Scoped to the nav on purpose: `.site-header__nav a` sets `padding: 8px 0`
   and `color`, and being a class+element selector it outranks a lone
   `.site-header__catalog` class. The padding half of that was already known;
   the colour half was not, and it silently swallowed every text colour the
   pill tried to set:

     - over the hero the pill took the nav's white, giving white text on the
       white pill — 1:1, the label and icon simply weren't there;
     - once solid it took the nav's near-black ink onto the dark gradient —
       1.4:1 at the navy end, effectively unreadable.

   Both states were setting the right colour and losing the cascade. Scoping
   these two rules the same way the padding is scoped is what makes them
   stick. Keep the `.site-header__nav` prefix on anything colour-related
   here, or it will lose again. The unscoped rules above still apply in the
   mobile drawer, which has no competing `a` rule of that weight. */
.site-header__nav .site-header__catalog {
  padding: 10px 20px;
  color: var(--color-navy);
}

.site-header--solid .site-header__nav .site-header__catalog {
  color: #ffffff;
}

.site-header__nav .site-header__catalog--soon {
  color: rgba(255, 255, 255, 0.82);
}

.site-header--solid .site-header__nav .site-header__catalog--soon {
  color: var(--color-ink-soft);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  padding: 0;
}

.site-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.site-header--solid .site-header__burger span {
  background: var(--color-navy);
}

.site-header__burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.site-header__burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header__mobile {
  display: none;
}

@media (max-width: 960px) {
  .site-header__nav {
    display: none;
  }

  .site-header__burger {
    display: flex;
  }

  .site-header__bar {
    height: 78px;
  }

  .site-header__mobile {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--color-white);
    transition: max-height 0.4s var(--ease-out);
  }

  .site-header__mobile.is-open {
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 18px 40px -30px rgba(11, 16, 48, 0.35);
  }

  .site-header__mobile ul {
    display: flex;
    flex-direction: column;
    padding: 12px var(--container-pad) 28px;
  }

  .site-header__mobile a {
    display: block;
    padding: 14px 0;
    font-weight: 600;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(11, 16, 48, 0.08);
  }

  /* In the mobile drawer the pill would fight the plain stacked links,
     so it drops back to a full-width row with the icon still attached. */
  .site-header__mobile .site-header__catalog {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 18px;
    border-bottom: none;
    color: #ffffff;
  }

  .site-header__mobile-sub {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
  }

  .site-header__mobile-sub a {
    color: var(--color-ink-soft);
    font-weight: 500;
    font-size: 0.92rem;
    border-bottom: none;
    padding: 10px 0;
  }
}