/* Intelligence Page - Bloomberg Professional Style */

.intelligence-page {
  background: #ffffff !important;
  font-family:
    'Geist Variable',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: #000000;
}

/* Professional Navigation Header - Celonis Interactive Style */
.intelligence-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000000;
  /* Default Black */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 !important;
  /* Override global 3.5rem padding */
  height: auto !important;
  pointer-events: auto !important;
  /* Override global pointer-events: none */
}

/* Interaction State: Header turns white when a dropdown is active */
/* Navigation Container */
.intelligence-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12rem;
  /* Restore large padding */
  /* 72px — verified against both references' own stylesheets: Legora's nav
     container is height:72px (framer-vauv6b-container) and Affinity defines
     --nav--height: 4.5rem. Every 100vh-minus-header calc moves with this. */
  height: 72px;
  width: 100%;
  margin: 0;
  max-width: none;
  /* Remove constraint */
}

/* Hide Hamburger on Desktop */
.menu-toggle {
  display: none;
}

/* ... existing styles ... */

.intelligence-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.nav-logo-img {
  height: 48px;
  width: auto;
  display: block;
  transition: filter 0.3s ease;
}

/* Logo turns black (inverted) on hover */
.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 3rem;
  height: 100%;
}

.nav-item {
  position: static;
  /* Crucial for full-width dropdown */
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  color: #ffffff;
  text-decoration: none;
  /* 15px, down from 19.2 — the references run their nav at ~15-16px and at
     1.2rem ours shouted over the page. Sits with the 0.9rem CTA. */
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.3s ease;
  cursor: pointer;
}

/* Nav links turn black on header hover */
/* Mega Menu Dropdowns - Full Width White */
.dropdown-menu {
  position: absolute;
  top: 72px;
  /* Matches header height */
  left: 0;
  width: 100%;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  border-top: 1px solid #e5e5e5;
  /* Box shadow removed for sharp cut-off as requested */
  box-shadow: none;
  padding: 2rem 0;
  /* Add vertical padding for the "gaps" shown in screenshot */
}

.nav-item .nav-link:hover ~ .dropdown-menu,
.nav-item .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-content {
  display: grid;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 12rem;
  /* Match header padding exactly */
}

/* Single Column / Simple Grid */
.dropdown-content.single-column {
  grid-template-columns: 350px 1fr;
  gap: 0;
  /* Border removed from container */
}

.dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2rem;
  height: auto;
  min-height: 100%;
  background: #ffffff;
}

.dropdown-section:last-child {
  border-right: none;
}

/* Solutions Grid - 2 rows x 3 columns */
/* Visual Card - High Impact */
.nav-visual-card {
  background: #000000;
  color: #ffffff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* Changed from auto/min-height to strictly 100% of grid cell */
  text-decoration: none;
  margin-right: 0;
  position: relative;
  overflow: hidden;
  border-right: 1px solid #e5e5e5;
}

.nav-visual-card:hover .visual-card-bg {
  transform: scale(1.05);
  /* Subtle zoom */
  opacity: 0.6;
}

.visual-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  transition: all 0.5s ease;
  z-index: 0;
}

.visual-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.nav-visual-card h3 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}

.nav-visual-card .arrow-icon {
  width: 40px;
  height: 40px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  transition: all 0.3s ease;
}

.nav-visual-card:hover .arrow-icon {
  background: #ffffff;
  border-color: #ffffff;
}

.nav-visual-card:hover .arrow-icon svg {
  stroke: #000000;
}

/* Typography & Links */
.dropdown-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  margin-bottom: 2rem;
  display: block;
}

.dropdown-item {
  padding: 1rem 0;
  /* More breathing room */
  text-decoration: none;
  color: #000000;
  display: flex;
  flex-direction: column;
  /* No border. Separation is by space, never by rule — see the design-system
     note in product-pages.css. This used to carry `border-bottom: 1px solid
     #f0f0f0` and drew hairlines between every dropdown entry. */
  transition: color 0.2s ease;
}

.dropdown-item:hover {
  /* Only text highlight, no movement or background */
}

.dropdown-item strong {
  font-size: 1.25rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

.dropdown-item:hover strong {
  color: #0066ff;
}

.dropdown-item span {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  max-width: 90%;
  margin-top: 0.25rem;
  font-family: 'Geist Variable', sans-serif;
  /* Keep body sans for readability */
}

/* Nav Actions (Book Demo) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #085c5b;
  /* Teal button */
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 2px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.nav-cta:hover {
  background: #054342;
  transform: translateY(-1px);
}

.nav-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #222;
  border-radius: 4px;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.nav-profile:hover {
  background: #333;
}

.nav-login {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-login:hover {
  text-decoration: underline;
}

/* SVG hover effects removed */

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-cta {
  display: inline-block;
  padding: 0.7rem 1.75rem;
  background: #085c5b;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.nav-cta:hover {
  background: #054342;
  transform: translateY(-1px);
}

.nav-login {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s ease;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.nav-login:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Hero Section - Dark with Visual */
/* Hero Section - Dark with Visual */
.intelligence-hero {
  min-height: 75vh;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  padding: 12rem 12rem 6rem 12rem;
  /* Restore 12rem padding */
  position: relative;
  overflow: hidden;
  display: block;
  /* Remove flex centering */
}

.hero-container {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.hero-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fbe5b6;
  margin-bottom: 1.5rem;
}

.intelligence-hero h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.intelligence-hero p {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2.5rem;
}

.cta-button {
  display: inline-block;
  padding: 0.6rem 1.35rem;
  background: #0066ff;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #0052cc;
}

/* Hero Visual Image */
.hero-visual {
  position: relative;
  height: 450px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overview Section */

/* Products Section - Bloomberg Style */

/* Data Types Section */

/* AI + Human Expertise Differentiator Section - Bloomberg Style */

/* Industries Section */

/* Intelligence Footer */
.intelligence-footer {
  background: #ffffff;
  padding: 4rem 12rem 2rem;
  /* Restore 12rem padding */
  border-top: 1px solid #e5e5e5;
  display: block;
}

.intelligence-footer .footer-container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.intelligence-footer .footer-grid {
  display: grid;
  /* Five columns since the Solutions column joined; the CTA blurb gets the
     extra share. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.intelligence-footer .footer-col h4 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  color: #000;
}

.intelligence-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intelligence-footer .footer-col li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #666;
}

.intelligence-footer .footer-col a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.intelligence-footer .footer-col a:hover {
  color: #0066ff;
}

.intelligence-footer .footer-col p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
}

.intelligence-footer .footer-cta p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.footer-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #0066ff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.3s ease;
}

.footer-button:hover {
  background: #0052cc;
}

.intelligence-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid #e5e5e5;
}

.intelligence-footer .footer-bottom p {
  margin: 0;
  font-size: 0.9rem;
  /* #999 on the white footer measured 2.5:1 — below WCAG AA. */
  color: rgba(16, 16, 18, 0.62);
}

.intelligence-footer .footer-links {
  display: flex;
  gap: 2rem;
}

.intelligence-footer .footer-links a {
  font-size: 0.9rem;
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.intelligence-footer .footer-links a:hover {
  color: #0066ff;
}

/* Use Case Sections for Industry Pages */

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.feature-list li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.75rem;
}

.feature-list li:before {
  content: '→';
  position: absolute;
  left: 0;
  color: #0066ff;
  font-weight: 600;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0066ff;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  transition: gap 0.3s ease;
}

.product-link:hover {
  gap: 0.75rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 2rem;
}

.feature-item h4 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: #000;
}

.feature-item p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #666;
}

.code-sample {
  background: #1a1a1a;
  color: #00ff88;
  padding: 2rem;
  border-radius: 8px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-x: auto;
}

/* CTA Section */
.cta-section {
  padding: 6rem 12rem;
  background: #0a5c5c;
  text-align: center;
}

.cta-container {
  max-width: 800px;
  margin: 0 auto;
}

.cta-section h2 {
  font-size: 2.8rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.cta-section p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-visual {
    height: 350px;
  }

  /* Reduce padding globally on tablet */
  .intelligence-nav,
  .intelligence-hero,
  .cta-section,
  .intelligence-footer {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .intelligence-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1440px) {
  .intelligence-header {
    height: auto;
  }

  /* Reduce padding globally on mobile */
  .intelligence-nav,
  .intelligence-hero,
  .cta-section,
  .intelligence-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .intelligence-hero {
    padding-top: 8rem;
    /* Maintain top padding */
    padding-bottom: 4rem;
  }

  /* Hide Desktop Nav on Mobile */
  .nav-menu,
  .nav-actions {
    display: none;
  }

  /* Show Mobile Menu Toggle */
  .menu-toggle {
    display: flex !important;
    /* Force show */
  }

  .menu-toggle span {
    background: #ffffff;
    /* White burger on black header */
  }

  /* Mobile Menu Removed */

  .intelligence-hero {
    padding: 8rem 2rem 4rem 2rem;
  }

  .cta-section {
    padding: 4rem 2rem;
  }

  .intelligence-footer {
    padding: 3rem 2rem 2rem;
  }

  .hero-visual {
    height: 280px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cta-section h2 {
    font-size: 2rem;
  }

  .intelligence-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .intelligence-footer .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

/* ============================================
   MOBILE MENU - iOS-Style Clean Design
   ============================================ */

/* Mobile Nav Container */
.mobile-nav-overlay {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 998;
  overflow-y: auto;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Header */
.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #000;
}

.mobile-nav-logo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: #fff;
}

.mobile-nav-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  transition: opacity 0.2s;
}

.mobile-nav-close:active {
  opacity: 0.5;
}

/* Nav Content */
.mobile-nav-content {
  padding: 16px 0 100px;
}

/* Nav Section */
.mobile-nav-section {
  border-bottom: 1px solid #f5f5f5;
  padding: 0;
}

/* Nav Item (Primary) */
.mobile-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.5px;
  color: #1a1a1a;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  font-family: inherit;
}

.mobile-nav-item:active {
  background: #fafafa;
}

/* Dropdown Arrow */
.mobile-nav-arrow {
  font-size: 18px;
  font-weight: 300;
  color: #666;
  transition: transform 0.2s;
}

.mobile-nav-item.open .mobile-nav-arrow {
  transform: rotate(90deg);
}

/* Submenu */
.mobile-nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fafafa;
}

.mobile-nav-submenu.open {
  max-height: 600px;
}

.mobile-nav-subitem {
  display: block;
  padding: 12px 24px 12px 40px;
  font-size: 17px;
  font-weight: 400;
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-nav-subitem:active {
  color: #000;
}

.mobile-nav-label {
  display: block;
  padding: 16px 24px 8px 40px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
}

.mobile-nav-label:first-child {
  padding-top: 12px;
}

/* CTA Buttons */
.mobile-nav-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px 32px;
  background: linear-gradient(to top, #fff 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-cta-primary {
  display: block;
  width: 100%;
  padding: 16px;
  background: #085c5b;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.mobile-nav-cta-primary:active {
  background: #054342;
}

.mobile-nav-cta-secondary {
  display: block;
  width: 100%;
  padding: 16px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.mobile-nav-cta-secondary:active {
  background: #f5f5f5;
}

/* Menu Toggle Animation */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Body scroll lock when menu open */
body.menu-open {
  overflow: hidden;
}

/* ============================================================
   Full-bleed cinematic hero (video-ready)
   Background <video> covers the section; the people photo acts
   as the poster/placeholder until the hero video is supplied.
   ============================================================ */
.intelligence-hero.hero-cinematic {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 12rem 5rem;
  background: #08080a;
  overflow: hidden;
  isolation: isolate;
}

/* Background media layer. No poster — the hero sits on #08080a until the
   first video frame paints, so no stale still image flashes on refresh. */
.hero-bg-media {
  position: absolute;
  inset: 0;
  background: #08080a;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: -2;
}

/* Legibility scrim — darkened on the left where the copy sits,
   plus a soft lift from the bottom edge. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 10, 0.68) 0%,
      rgba(8, 8, 10, 0.12) 24%,
      rgba(8, 8, 10, 0.12) 58%,
      rgba(8, 8, 10, 0.72) 100%
    ),
    radial-gradient(ellipse 82% 60% at 50% 50%, rgba(8, 8, 10, 0.5) 0%, rgba(8, 8, 10, 0) 72%);
}

.hero-cinematic .hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-cinematic .hero-text {
  max-width: none;
  text-align: center;
}

.hero-cinematic h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  white-space: nowrap;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Subhead + CTA on one row, compact */
.hero-cinematic .hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-cinematic .hero-actions p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero-cinematic .hero-actions .cta-button {
  flex: none;
}

@media (max-width: 1024px) {
  .intelligence-hero.hero-cinematic {
    padding: 7rem 4rem;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

@media (max-width: 768px) {
  .intelligence-hero.hero-cinematic {
    padding: 6rem 1.5rem 4rem;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero-cinematic .hero-text {
    max-width: 100%;
  }

  /* Allow the headline to wrap and stack the row on small screens */
  .hero-cinematic h1 {
    white-space: normal;
  }

  .hero-cinematic .hero-actions {
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Even, bottom-weighted scrim reads better over a narrow column */
  .hero-cinematic .hero-overlay {
    background:
      linear-gradient(180deg, rgba(8, 8, 10, 0.75) 0%, rgba(8, 8, 10, 0) 14%),
      linear-gradient(
        0deg,
        rgba(8, 8, 10, 0.88) 0%,
        rgba(8, 8, 10, 0.4) 55%,
        rgba(8, 8, 10, 0.6) 100%
      );
  }
}

/* ============================================================
   Transparent floating header (cinematic hero pages only)
   Scoped via .header-overlay so the other pages that share this
   stylesheet keep their solid black nav.
   ============================================================ */
.intelligence-header.header-overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* Solidify once scrolled past the hero (sections below are light) */
.intelligence-header.header-overlay.scrolled {
  background: rgba(8, 8, 10, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Role line under each co-worker card */

/* The footer CTA is a button, not a body link — `.intelligence-footer
   .footer-col a` (grey) would otherwise out-specify `.footer-button`
   and render grey-on-blue. */
.intelligence-footer .footer-col a.footer-button {
  color: #ffffff;
}
.intelligence-footer .footer-col a.footer-button:hover {
  color: #ffffff;
}

/* Smoother open/close than the previous blanket `all 0.3s ease`. */
.dropdown-menu {
  transition:
    opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.22s linear;
  transform: translateY(-6px);
}
.nav-item .nav-link:hover ~ .dropdown-menu,
.nav-item .dropdown-menu:hover {
  transform: translateY(0);
}

/* ============================================================
   Design system v2 — site chrome (nav + footer).

   Brings the shared chrome onto the same system as /product:
   no rules, square surfaces, stone + ink + slate, system UI.
   Appended as an override block so the legacy page sections
   above are left untouched.
   ============================================================ */

:root {
  --stone-0: #fafaf9;
  --stone-1: #f1f0ee;
  --ink: #0b0b0c;
  --slate: #39434f;
  --slate-deep: #2b333c;
  --slate-soft: #5a6674;
  --text: #101012;
  --text-muted: rgba(16, 16, 18, 0.62);
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ---- Header ---- */
.intelligence-header,
.intelligence-header.header-overlay,
.intelligence-header.header-overlay.scrolled {
  border-bottom: none;
  font-family: var(--ui);
}
.intelligence-header {
  background: var(--ink);
}

/* ---- Dropdowns: filled panels, no rules, square ---- */
.dropdown-menu {
  border-top: none;
  background: var(--stone-0);
}
.nav-visual-card {
  border-right: none;
  border-radius: 0;
}
.nav-visual-card .arrow-icon,
.nav-visual-card:hover .arrow-icon {
  border: none;
  background: rgba(255, 255, 255, 0.14);
}

/* ---- Nav actions ---- */
.nav-login {
  border: none;
}
.nav-cta {
  background: var(--slate);
  border-radius: 999px;
}
.nav-cta:hover {
  background: var(--slate-deep);
}
.nav-profile {
  border-radius: 0;
}

/* ---- Mobile overlay ---- */
.mobile-nav-section {
  border-bottom: none;
}
.mobile-nav-cta-primary {
  background: var(--slate);
  border-radius: 999px;
}
.mobile-nav-cta-secondary {
  border: none;
  background: var(--stone-1);
  border-radius: 999px;
}

/* ---- Footer ---- */
.intelligence-footer {
  border-top: none;
  background: var(--stone-1);
  font-family: var(--ui);
}
.intelligence-footer .footer-bottom {
  border-top: none;
}
.intelligence-footer .footer-col a.footer-button {
  background: var(--slate);
  border-radius: 999px;
  color: #fff;
}
.intelligence-footer .footer-col a.footer-button:hover {
  background: var(--slate-deep);
  color: #fff;
}

/* ---- Nav item reads as a pill when its menu is open (reference: Legora) ---- */
.nav-menu .nav-link {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.nav-menu .nav-link:hover,
.nav-item.has-dropdown > .nav-link:hover,
.nav-item.has-dropdown:has(> .dropdown-menu:hover) > .nav-link {
  background: var(--stone-0);
  color: var(--ink);
}

/* ---- White nav bar ----------------------------------------------------
   The solid header goes white with ink type. The overlay variant (used on
   the homepage, sitting over the dark hero video) stays transparent with
   white type, so it is excluded from every rule here. */
.intelligence-header:not(.header-overlay) {
  background: #ffffff;
}
.intelligence-header:not(.header-overlay) .nav-logo-img {
  /* the lockup ships as white artwork */
  filter: invert(1);
}
.intelligence-header:not(.header-overlay) .nav-menu .nav-link {
  color: var(--text);
  font-weight: 400;
}
.intelligence-header:not(.header-overlay) .nav-menu .nav-link:hover,
.intelligence-header:not(.header-overlay) .nav-item.has-dropdown > .nav-link:hover,
.nav-item.has-dropdown:has(> .dropdown-menu:hover) > .nav-link {
  background: var(--stone-1);
  color: var(--ink);
}
.intelligence-header:not(.header-overlay) .nav-profile {
  color: var(--text);
  background: var(--stone-1);
}
.intelligence-header:not(.header-overlay) .nav-login {
  color: var(--text);
}
.intelligence-header:not(.header-overlay) .menu-toggle span {
  background: var(--ink);
}

/* Unbold the nav labels in both variants. */
.nav-menu .nav-link {
  font-weight: 400;
}

/* ---- Nav actions: shorter, lighter ----
   Profile square was 36px and the CTA 39px tall, which sat heavy against
   400-weight labels. Both come down and the profile becomes a circle. */
.nav-actions .nav-cta {
  padding: 0.45rem 1.3rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.nav-actions .nav-profile {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-actions .nav-profile svg {
  width: 16px;
  height: 16px;
}

/* ---- Legacy .cta-button matches the nav CTA ----
   It was still the old #0066ff at 36px while every other CTA had moved to
   slate. Same fill, padding, size and weight as .nav-cta. Used by the
   homepage hero and the api / atlas-pe / data-services / venture-capital
   pages, so this brings all of them across at once. */
.cta-button {
  background: var(--slate);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.45rem 1.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.2s ease;
}
.cta-button:hover {
  background: var(--slate-deep);
  color: #ffffff;
}

/* ---- Arrow on every CTA ----
   The /product hero CTA already carried an arrow in markup while the nav,
   footer and legacy buttons did not. Added here via ::after so all of them
   match without touching the escaped bodyHtml on the legacy pages.
   .pd-cta is excluded — it has a real <span> arrow already. */
.nav-cta,
.cta-button,
.footer-button,
.mobile-nav-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-cta::after,
.cta-button::after,
.footer-button::after,
.mobile-nav-cta-primary::after {
  content: '→';
  font-size: 0.95em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.nav-cta:hover::after,
.cta-button:hover::after,
.footer-button:hover::after,
.mobile-nav-cta-primary:hover::after {
  transform: translateX(3px);
}

/* ---- Legacy page bodies onto v2 ----
   The last hairlines on the homepage: list rows and section edges that
   drew rules where spacing and fills should do the work. */

/* ==========================================================================
   Nav dropdowns — floating cards, not full-bleed bands
   ==========================================================================
   Solutions and Company used to render as `left:0; width:100%` white bands
   spanning the viewport, with their contents inset by `padding: 0 12rem`.
   That is what put the "cut" edge-to-edge and left dead gaps beside the
   columns. They are now anchored, content-width cards that hang below the
   header — the same treatment the Products tray already had.

   Corners are rounded here by explicit request. This is the one deliberate
   exception to the `--r: 0` rule in product-pages.css: it applies to nav
   chrome only, never to page content.
   ========================================================================== */

.intelligence-nav .nav-item.has-dropdown {
  position: relative;
}

/* Content grid — columns sized to their contents, separated by space rather
   than rules (see the design-system note in product-pages.css). */
.intelligence-header .dropdown-content {
  padding: 0;
  width: auto;
  max-width: none;
  align-items: start;
  /* Asymmetric gaps: text->text tighter than card->text. One shared gap made
     them equal in px, but the card is a solid block so its edge reads tight
     while the ragged text edges read loose — the Meetings->Library gap looked
     wider than image->Assistant. */
  column-gap: 1.5rem;
  row-gap: 0;
}

.intelligence-header .dropdown-cols {
  grid-template-columns: 210px repeat(2, minmax(0, 260px));
}

/* Company is a single list. The 190px leading column was the "About" card's
   slot; with the card gone it left an empty column and squeezed the list to
   zero width. */
.intelligence-header .dropdown-content.single-column {
  grid-template-columns: minmax(0, 230px);
}

.intelligence-header .dropdown-section {
  padding: 0;
  background: transparent;
  min-height: 0;
  gap: 0;
}

.intelligence-header .dropdown-section-title {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(16, 16, 18, 0.45);
  margin-bottom: 0.9rem;
}

.intelligence-header .dropdown-section .dropdown-item {
  padding: 0.4rem 0;
  background: transparent;
  border-radius: 0;
}

.intelligence-header .dropdown-section .dropdown-item strong {
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--ink, #101012);
  transition: color 0.16s ease;
}

/* Legora's hover: the word changes colour. No pill. */
.intelligence-header .dropdown-section .dropdown-item:hover {
  background: transparent;
}
.intelligence-header .dropdown-section .dropdown-item:hover strong {
  color: #39434f;
}

/* The visual card sits inside the padding and gets its own rounding, so the
   parent's rounded corners are never clipped by a full-bleed child. */
/* The card stretches to whatever the tallest list column is. It used to force
   min-height: 240px, which made IT the tallest thing in the panel and left a
   band of empty space under every column. 150px is only a floor for the
   single-item menus. */
.intelligence-header .nav-visual-card {
  border-radius: 12px;
  overflow: hidden;
  min-height: 132px;
  /* Stretch exactly to the tallest text column so the bottom edges align. */
  align-self: stretch;
  /* Adds to the 1.5rem column-gap: the card keeps ~40px clearance. */
  margin-right: 1rem;
}

@media (max-width: 1100px) {
  .intelligence-header .dropdown-cols {
    grid-template-columns: repeat(2, minmax(0, 240px));
  }
  .intelligence-header .nav-visual-card {
    display: none;
  }
}

/* --- Dropdown item sub-labels --------------------------------------------
   Without these a family office and a corp-dev team get identical treatment
   and learn nothing from the menu. */
/* ~40px per row, down from ~55px. At the looser spacing the items read as a
   list of unrelated links rather than one set. */
.intelligence-header .dropdown-section .dropdown-item {
  display: block;
  padding: 0.15rem 0;
  line-height: 1.25;
}

.intelligence-header .dropdown-item-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  /* The grid tracks are max-content, so a sub-label should never need to
     wrap — but "Cited answers, or an honest no" landed within a pixel of its
     track and broke to two lines, making that one row 65px against 48px for
     its neighbours. Pinning it to one line keeps the rhythm even. */
  white-space: nowrap;
  font-weight: 400;
  color: rgba(16, 16, 18, 0.62);
}

.intelligence-header .dropdown-section .dropdown-item:hover .dropdown-item-sub {
  color: rgba(16, 16, 18, 0.62);
}

/* The visual card fills its grid cell; the image must cover it, and the
   caption sits above the image at every size. */
.intelligence-header .nav-visual-card .visual-card-bg {
  background-size: cover;
  background-position: center;
}

.intelligence-header .nav-visual-card h3 {
  font-size: 0.9375rem;
  line-height: 1.25;
  font-weight: 500;
}

/* --- Products tray -------------------------------------------------------
   Products used to be a bare two-column list of seven names in a compact
   translucent panel (.dropdown-panel, now deleted along with ~30 dead rules).
   It is the same card + grouped-columns layout as Solutions now, so the two
   menus read as one system. Its columns are 3 and 4, so it gets a little more
   width than Solutions' 4 and 2. */
/* The card is a fixed 210px; every list column then sizes to its own longest
   line. The tracks used to be `minmax(0, 250px)`, but no sub-label is 250px
   wide — the slack collected on the right of the panel and read as a fat
   asymmetric border (~200px right against ~32px left). max-content makes the
   panel hug its contents, so the 2.25rem padding is even on all four sides.
   Auto-flow means a menu can add or drop a column without touching this. */
.intelligence-header .dropdown-cols,
.intelligence-header .dropdown-cols-1 {
  /* 180px, down from 210 — at 210 the card outweighed the text columns. */
  grid-template-columns: 180px;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

@media (max-width: 1100px) {
  .intelligence-header .dropdown-cols,
  .intelligence-header .dropdown-cols-1 {
    grid-template-columns: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  .intelligence-header .dropdown-item-sub {
    white-space: normal;
  }
}

/* --- Hover bridge --------------------------------------------------------
   The panels hang 0.35rem below the header. Without a bridge across that gap
   the menu closes as the cursor travels into it. The old .dropdown-panel had
   this; the full-width bands never needed it. All three need it now. */
.intelligence-header .dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.4rem;
  height: 0.4rem;
}

/* --- Dropdown panel geometry ---------------------------------------------
   Restored: an earlier cleanup pass deleted every rule whose selector
   mentioned `dropdown-panel`, which caught the `:not(.dropdown-panel)`
   qualifier these rules used to carry and took the panel's size, position
   and radius with it. The qualifier is gone now — there is only one kind of
   panel — so the selector is plain. */
.intelligence-header .dropdown-menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  max-width: min(1080px, calc(100vw - 3rem));
  /* Tucked right under the trigger pill, as Legora hangs it. The nav item's
     hit-box runs ~21px below the visible pill (items stretch to the 80px
     header), so anchoring to the box put a fat gap under the pill however
     small the offset. Negative offset lands the card ~5px under the pill
     itself; the cursor never leaves the item's own box crossing it. */
  top: calc(100% - 0.75rem);
  /* 24px all round (was 32/36). The card sits directly at the padding edge —
     no extra inset — so this is the only whitespace between it and the panel
     corner. */
  padding: 1.5rem;
  background: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(16, 16, 18, 0.04),
    0 12px 32px rgba(16, 16, 18, 0.1),
    0 32px 64px rgba(16, 16, 18, 0.06);
}

.intelligence-header .nav-item .nav-link:hover ~ .dropdown-menu,
.nav-item .dropdown-menu:hover {
  transform: translateX(-50%) translateY(0);
}

/* Company used to be pinned to its trigger's right edge as an overflow guard.
   It centres under its trigger like the other two now — at ~600px wide it
   clears the viewport edge at every width the desktop nav is shown at
   (verified 1441-2560). The max-width above remains the backstop. */

/* Company: card + a single list column. */

/* --- Card caption fit -----------------------------------------------------
   The legacy card rule carries 2.5rem padding; on the 180px card that left
   ~100px for text and wrapped the caption to four lines. */
.intelligence-header .nav-visual-card {
  padding: 1.1rem 1.2rem;
}
.intelligence-header .nav-visual-card h3 {
  font-size: 0.875rem;
  line-height: 1.3;
}

/* --- Page dim while a menu is open ----------------------------------------
   What the references actually do: the banner stays transparent (Legora) and
   the page behind the open menu dims (Affinity), so the floating card reads
   separated from busy content — including the hero video — without the
   header changing state. The overlay sits under the header's z-index, is
   inert to the pointer, and fades rather than popping. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 900;
}
body:has(.intelligence-header .has-dropdown > .nav-link:hover)::after,
body:has(.intelligence-header .dropdown-menu:hover)::after {
  opacity: 1;
}

/* A touch of ambient above the panel so the top edge separates from light
   page content even where the header does not cover it. */
.intelligence-header .dropdown-menu {
  box-shadow:
    0 -4px 16px rgba(16, 16, 18, 0.05),
    0 1px 2px rgba(16, 16, 18, 0.04),
    0 12px 32px rgba(16, 16, 18, 0.1),
    0 32px 64px rgba(16, 16, 18, 0.06);
}

/* --- Trigger hit-boxes tile edge-to-edge ----------------------------------
   .nav-menu carried gap: 3rem — a 48px dead strip between triggers where the
   pointer was on neither item, so the open menu began closing and the next
   one opened: the "dancing" between Products and Solutions. The visual
   spacing moves inside each item; the hit-boxes now touch. */
.intelligence-header .nav-menu {
  gap: 0;
}
.intelligence-header .nav-item {
  padding: 0 1.5rem;
}

/* Grace period: the open menu waits 150ms before closing, so grazing a
   neighbouring trigger or the edge of the panel does not flap menus. Opening
   keeps a 50ms intent delay so a straight-line mouse pass over the nav does
   not flash every panel. */
.intelligence-header .dropdown-menu {
  transition-delay: 0.15s;
}
.intelligence-header .nav-item .nav-link:hover ~ .dropdown-menu,
.nav-item .dropdown-menu:hover {
  transition-delay: 0.05s;
}

/* --- Type, corrected against the references' shipped CSS ------------------
   Legora's nav and dropdown labels share one preset: 14px / 400 / 140%.
   Affinity's nav runs a 12-14px clamp. Ours were 15px, weight 500. */
.nav-link {
  font-size: 0.875rem;
  font-weight: 400;
}
.intelligence-header .dropdown-section .dropdown-item strong {
  font-size: 0.875rem;
}