/* Keep the canvas dark even while a new document is being painted. */
html { background: #08182e; }
/* Native document transitions keep the header outside the content crossfade.
   https://developer.chrome.com/docs/web-platform/view-transitions/cross-document */
@view-transition { navigation: auto; }
.ajc-public-nav { view-transition-name: site-header; }
/* Hold the already-rendered logo while the new document is painted. */
.ajc-public-nav__logo { view-transition-name: site-logo; }
::view-transition-group(site-logo) { animation-duration: 0s; z-index: 3; }
::view-transition-image-pair(site-logo) { isolation: isolate; }
::view-transition-old(site-logo) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(site-logo) { animation: none; opacity: 0; }
::view-transition-group(site-header) { animation-duration: 0s; z-index: 2; }
::view-transition-old(site-header) { animation: none; opacity: 0; }
::view-transition-new(site-header) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-group(root) { animation-duration: 180ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* Homepage header background and centred content shell. */
body.home {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(40, 91, 142, .19), transparent 62%),
    linear-gradient(155deg, #0b2039 0%, #08182e 48%, #050f20 100%);
  background-attachment: fixed;
}

body.home .ajc-public-nav {
  --glass-opacity: 0;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 32px);
  border-radius: 0;
  background: transparent;
  /* Sample the page on the header itself. The named transition layer prevents
     a child pseudo-element from reliably sampling content outside the header. */
  -webkit-backdrop-filter: blur(calc(22px * var(--glass-opacity))) saturate(calc(100% + 30% * var(--glass-opacity)));
  backdrop-filter: blur(calc(22px * var(--glass-opacity))) saturate(calc(100% + 30% * var(--glass-opacity)));
  border: 0;
  box-shadow: none;
}
.nav-signin {
  position: absolute;
  right: clamp(16px, 3vw, 36px);
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(170, 207, 247, .22);
  border-radius: 999px;
  background: rgba(133, 183, 238, .07);
  color: #d6e8ff;
  font: 500 14px/1.3 "Google Sans Flex", system-ui, sans-serif;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease;
}
.nav-signin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-signin:hover { background: rgba(133, 183, 238, .14); border-color: rgba(170, 207, 247, .4); }
.nav-signin:focus-visible { outline: 2px solid #a9cfff; outline-offset: 4px; }
@media (max-width: 600px) {
  .nav-signin { right: 12px; top: 12px; translate: none; min-height: 32px; padding: 6px 10px; font-size: 12px; }
  .nav-signin svg { width: 14px; height: 14px; }
}

body.home .ajc-public-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--glass-opacity);
  background: linear-gradient(115deg, rgba(8, 23, 46, .78), rgba(16, 43, 73, .68));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home .ajc-public-nav::before { background: rgba(9, 27, 48, .96); }
}

body.home .ajc-public-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 88px 1fr 1fr;
  column-gap: 0;
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 16px 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ajc-nav-item {
  display: grid;
  place-items: center;
  text-decoration: none;
  text-align: center;
  position: relative;
  z-index: 1;
  justify-self: stretch;
  width: 100%;
  padding: 20px 8px;
  min-height: 72px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c6d7ec;
  font: 500 15px/1.3 "Google Sans Flex", system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 0 12px rgba(143, 197, 255, .06);
  transition: color 220ms ease, text-shadow 280ms ease, transform 220ms ease;
}
.ajc-nav-item:hover,
.ajc-nav-item:focus-visible {
  color: #eef6ff;
  text-shadow: 0 0 14px rgba(143, 197, 255, .26);
}
.ajc-nav-item:focus-visible { outline: 2px solid #a9cfff; outline-offset: 4px; }
.ajc-nav-item:active { transform: translateY(1px); }
.ajc-nav-indicator {
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a9d6ff;
  box-shadow: 0 0 9px rgba(123, 192, 255, .38);
  pointer-events: none;
  transform: translateX(var(--nav-dot-x, 0px)) scaleX(var(--nav-dot-stretch, 1));
  opacity: 0;
  transition: opacity 350ms ease;
}
.nav-indicator-ready .ajc-nav-indicator { opacity: 1; }
.wave-intro .ajc-nav-indicator { opacity: 0; }
.wave-intro .ajc-public-nav__inner:has(.ajc-public-nav__brand.wave-revealed) .ajc-nav-indicator { opacity: 1; }
body.nav-settled .nav-indicator-ready .ajc-nav-indicator { opacity: 1; transition: none; }

body.home .ajc-public-nav__brand {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0;
}

body.home .ajc-public-nav__logo-img {
  width: 88px;
  height: 88px;
  max-width: 88px;
  max-height: 88px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 0 9px rgba(100, 195, 255, 0.28))
          drop-shadow(0 0 22px rgba(65, 139, 226, 0.14));
}

@media (max-width: 767px) {
  body.home .ajc-public-nav__inner {
    padding-block: 12px;
    grid-template-columns: 1fr 1fr 72px 1fr 1fr;
    column-gap: 0;
  }
  .ajc-nav-item { font-size: 12px; padding-inline: 2px; }

  body.home .ajc-public-nav__logo-img {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ajc-nav-item, .ajc-nav-indicator, .nav-signin { transition: none; }
}

/* Reserve equal space on both sides so the logo stays at the page centre. */
body.home .ajc-public-nav__inner { width: min(760px, calc(100% - 240px)); }
.nav-signin { text-decoration: none; white-space: nowrap; }
.nav-signin[aria-current="page"] { background: #a9cfff20; border-color: #a9cfff66; }
@media (max-width: 1000px) {
  body.home .ajc-public-nav__inner { width: min(640px, 100%); padding-top: 44px; }
  .nav-signin { top: 9px; right: 16px; translate: none; min-height: 34px; padding: 7px 12px; font-size: 12px; }
  .nav-signin svg { width: 15px; height: 15px; }
}
@media (max-width: 380px) {
  body.home .ajc-public-nav { padding-inline: 8px; }
  .ajc-nav-item { font-size: 11px; }
}