.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page shells — keep body backgrounds out of inline <style> blocks */
.page--home {
  background-color: #f8f9ff;
  color: #161c25;
}

.page--contact {
  background-color: #0a0a0a;
}

.perspective-card-number {
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-size: 8rem;
  z-index: 0;
  pointer-events: none;
}

.perspective-insight-bg {
  background: linear-gradient(15deg, #00696e 0%, #00adb5 100%);
}

.glass-nav {
  background-color: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
}

.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
  transform: translateX(0);
}

/*
 * Desktop primary nav — scoped CSS (partial inject + JS only sets aria-current).
 * !important: Tailwind Play CDN injects styles after this file; preflight uses a{color:inherit},
 * so links otherwise pick up body text-on-surface / page--home (#161c25) and look nearly black on the bar.
 */
#site-header #nav-desktop-links .nav-desktop-link {
  color: #e8eaed !important;
}

#site-header #nav-desktop-links .nav-desktop-link:hover {
  color: #00adb5 !important;
}

#site-header #nav-desktop-links .nav-desktop-link[aria-current="page"] {
  color: #00adb5 !important;
  font-weight: 600;
  border-bottom: 2px solid #00696e;
  padding-bottom: 0.25rem;
}