/**
 * Mobile header (≤ 900px): logo left, round menu button right.
 * Over a dark hero at the top of the page the bar is transparent with the
 * white logo; once scrolled (or on pages without a dark hero) it becomes a
 * solid white bar with the colour logo.
 */
@media (max-width: 900px) {
  html body.next-menu-version header.site-header--next-menu {
    position: fixed !important; inset: 0 0 auto 0 !important; z-index: 1000 !important;
    width: 100% !important; height: auto !important; margin: 0 !important;
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 0 !important; border-bottom: 1px solid rgba(28, 53, 94, .08) !important; border-radius: 0 !important;
    box-shadow: 0 6px 24px rgba(16, 43, 79, .07) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    transform: none !important; transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease !important;
  }
  html body.next-menu-version header.site-header--next-menu .site-header__inner,
  html body.next-menu-version header.site-header--next-menu .site-header__shell {
    width: 100% !important; max-width: none !important; height: 64px !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important;
  }
  html body.next-menu-version header.site-header--next-menu .header-start {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; height: 64px !important; margin: 0 !important; padding: 0 18px 0 20px !important; gap: 16px !important;
    position: static !important; transform: none !important;
  }

  /* Logo. */
  html body.next-menu-version header.site-header--next-menu .brand-link {
    order: 1 !important; position: relative !important; display: block !important;
    width: 118px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  }
  html body.next-menu-version header.site-header--next-menu .brand-link img {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important;
    object-fit: contain !important; object-position: left center !important; margin: 0 !important; transform: none !important;
    transition: opacity .3s ease !important;
  }
  html body.next-menu-version header.site-header--next-menu img.brand-link__mark { opacity: 0 !important; visibility: hidden !important; }
  html body.next-menu-version header.site-header--next-menu img.brand-link__wordmark--default { opacity: 1 !important; visibility: visible !important; }
  html body.next-menu-version header.site-header--next-menu img.brand-link__wordmark--inverse { opacity: 0 !important; visibility: visible !important; }

  /* Menu button: round, two lines. */
  html body.next-menu-version header.site-header--next-menu .menu-burger {
    order: 2 !important; position: relative !important; flex: none !important; display: block !important;
    width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: #1c355e !important; box-shadow: 0 6px 16px rgba(28, 53, 94, .22) !important;
    transform: none !important; cursor: pointer; transition: background-color .3s ease, box-shadow .3s ease !important;
  }
  html body.next-menu-version header.site-header--next-menu .menu-burger span {
    position: absolute !important; left: 13px !important; display: block !important; width: 18px !important; height: 2px !important;
    margin: 0 !important; border-radius: 2px !important; background: #fff !important; opacity: 1 !important; transform: none !important;
    transition: transform .3s ease, width .3s ease !important;
  }
  html body.next-menu-version header.site-header--next-menu .menu-burger span:nth-child(1) { top: 17px !important; }
  html body.next-menu-version header.site-header--next-menu .menu-burger span:nth-child(2) { top: 24px !important; width: 12px !important; left: 19px !important; }
  html body.next-menu-version header.site-header--next-menu .menu-burger span:nth-child(3) { display: none !important; }
  html body.next-menu-version header.site-header--next-menu .menu-burger:hover span:nth-child(2) { width: 18px !important; left: 13px !important; }
  html body.next-menu-version header.site-header--next-menu .menu-burger:focus-visible { outline: 2px solid #00a3b4 !important; outline-offset: 3px !important; }

  html body.next-menu-version header.site-header--next-menu .header-context,
  html body.next-menu-version header.site-header--next-menu .primary-nav { display: none !important; }

  /* Dark hero at the top of the page: transparent bar, white logo, glass button. */
  html body.next-menu-version:is(.home-mode, :has(main .page-video-hero)) header.site-header--next-menu:not(.is-compact) {
    background: linear-gradient(180deg, rgba(4, 16, 32, .55), rgba(4, 16, 32, 0)) !important;
    border-bottom-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html body.next-menu-version:is(.home-mode, :has(main .page-video-hero)) header.site-header--next-menu:not(.is-compact) img.brand-link__wordmark--default { opacity: 0 !important; }
  html body.next-menu-version:is(.home-mode, :has(main .page-video-hero)) header.site-header--next-menu:not(.is-compact) img.brand-link__wordmark--inverse { opacity: 1 !important; }
  html body.next-menu-version:is(.home-mode, :has(main .page-video-hero)) header.site-header--next-menu:not(.is-compact) .menu-burger {
    background: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }

  /* No white band above dark heroes: the hero starts under the header. */
  html body.next-menu-version.page-mode:has(main .page-video-hero) main {
    padding-top: 0 !important; margin-top: 0 !important;
  }
  html body.next-menu-version.page-mode main .page-video-hero:first-of-type {
    margin-top: 0 !important; padding-top: calc(112px + env(safe-area-inset-top, 0px)) !important;
  }
  /* Pages without a dark hero keep a clearance under the white bar. */
  html body.next-menu-version.page-mode:not(:has(main .page-video-hero)) main {
    padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 900px) {
  /* Older header rules shift the logo and pad the shell: neutralise them. */
  html body.next-menu-version header#site-header.site-header--next-menu #site-header-shell.site-header__shell { padding: 0 !important; }
  html body.next-menu-version header#site-header.site-header--next-menu .header-start a.brand-link { height: 34px !important; top: 0 !important; translate: none !important; transform: none !important; }
  html body.next-menu-version header#site-header.site-header--next-menu .header-start a.brand-link > img {
    top: 0 !important; left: 0 !important; translate: none !important; transform: none !important;
    clip-path: none !important; -webkit-clip-path: none !important; animation: none !important;
  }
}


/* Desktop mega menu: links styled exactly like the column title (2026-10-11). */
@media (min-width: 901px) {
  body .site-header--next-menu .next-menu-column__link {
    font-size: .68rem !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
    color: #1c355e !important; line-height: 1.6 !important;
  }
  body .site-header--next-menu .next-menu-column__link:hover,
  body .site-header--next-menu .next-menu-column__link:focus-visible { color: #00a3b4 !important; }
}