/*
 * Authoritative navigation layer shared by every page. It loads after each
 * route stylesheet so the compact mobile menu remains identical at all widths.
 */
#iam-site .menu-toggle {
  display: inline-flex !important;
}

#iam-site #primary-navigation {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 220 !important;
  display: none !important;
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  background: rgba(18, 20, 25, 0.97) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

#iam-site #primary-navigation[data-open="true"] {
  display: flex !important;
}

#iam-site #primary-navigation > a {
  width: 100% !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.9rem !important;
}

#iam-site #primary-navigation > a:hover,
#iam-site #primary-navigation > a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--bronze-soft) !important;
}

#iam-site .nav-indicator {
  display: none !important;
}

/*
 * Keep the approved visual treatment while avoiding persistent compositing
 * layers and expensive full-frame backdrop repaints during native scrolling.
 * These rules live in the existing shared stylesheet to avoid an additional
 * render-blocking request.
 */
:root {
  scroll-behavior: auto;
}

#iam-site .scroll-progress span {
  transition: none;
}

#iam-site .iam-page.motion-ready [data-reveal] {
  transition-duration: .52s;
  will-change: auto;
}

#iam-site .iam-page.motion-ready [data-reveal].is-visible {
  will-change: opacity, transform;
}

#iam-site .iam-scroll-heading {
  transition: none;
  will-change: auto;
}

#iam-site .iam-tap-target {
  will-change: auto;
}

#iam-site .hero-logo {
  transition-duration: .64s;
}

#iam-site .hero::before,
#iam-site .hero-logo::before,
#iam-site .hero-logo::after,
#iam-site .journey-step[data-state="current"] .journey-dot {
  animation-play-state: paused;
}

#iam-site .hero[data-ambient-active="true"]::before,
#iam-site .hero[data-ambient-active="true"] .hero-logo::before,
#iam-site .hero[data-ambient-active="true"] .hero-logo::after,
#iam-site .journey-rail[data-motion-active="true"] .journey-step[data-state="current"] .journey-dot {
  animation-play-state: running;
}

#iam-site .site-header {
  -webkit-backdrop-filter: saturate(135%) blur(10px);
  backdrop-filter: saturate(135%) blur(10px);
}

#iam-site :is(.metrics-grid, .button.secondary, .play) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#iam-site .play {
  background: rgba(0, 0, 0, .62);
}

#iam-site .back-to-top {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#iam-site .iam-section-transition-light {
  contain: layout style;
  filter: none;
  will-change: auto;
}

#iam-site .iam-section-transition-light[data-motion-active="true"] {
  filter: blur(24px);
  will-change: transform, opacity;
}

@media (max-width: 620px), (pointer: coarse) {
  #iam-site .site-header {
    -webkit-backdrop-filter: saturate(125%) blur(8px);
    backdrop-filter: saturate(125%) blur(8px);
  }

  #iam-site .iam-section-transition-light {
    filter: none;
  }

  #iam-site .iam-section-transition-light[data-motion-active="true"] {
    filter: blur(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #iam-site .iam-section-transition-light {
    display: none;
  }
}