/*
  Hero + header visual pass.
  This layer is intentionally self-contained: it is loaded after the existing
  visual layers and does not change the DOM or the Three.js render loop.
*/

/* A white hero needs a crisper gemstone, not a paler one. The filter affects
   only the WebGL canvas, so the explanatory card and the headline stay calm. */
.hero-refraction .signal-core canvas {
  filter:
    saturate(1.72)
    contrast(1.18)
    brightness(.91)
    drop-shadow(0 22px 24px rgba(24, 35, 64, .26))
    drop-shadow(0 7px 8px rgba(201, 50, 60, .14)) !important;
}

/* A subtle dark shell behind the transparent canvas increases edge separation
   without reintroducing a second, decorative diamond shape. */
.hero-refraction .signal-core.has-3d::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 76%;
  height: 44%;
  left: 12%;
  bottom: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(22, 32, 60, .22), rgba(22, 32, 60, 0) 70%);
  filter: blur(11px);
  pointer-events: none;
}

/* The control remains a white, precise object in both navigation states. */
.menu-toggle,
.menu-toggle[aria-expanded='true'] {
  min-width: 96px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff !important;
  color: #151820 !important;
  box-shadow: 0 6px 18px rgba(20, 25, 35, .10);
}
.menu-toggle i,
body.menu-open .site-header .menu-toggle i,
.menu-toggle[aria-expanded='true'] i {
  background: #151820 !important;
}
.menu-toggle span { padding-right: 25px; }
.menu-toggle i { right: 14px; width: 17px; }

/* The overlay reads as a compact navigation panel rather than a second page. */
@media (min-width: 901px) {
  .site-menu {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .58fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(30px, 5vw, 78px);
    padding: clamp(96px, 11vh, 126px) var(--page) clamp(26px, 3.5vh, 42px);
    border-radius: 0 0 30px 30px;
  }
  .menu-links { gap: clamp(8px, 1.35vh, 16px); }
  .menu-links a {
    gap: 13px;
    padding: 2px 0;
    font-size: clamp(38px, 4.25vw, 66px);
    line-height: .88;
  }
  .menu-links a small { margin-top: .5em; font-size: 8px; }
  .menu-kicker {
    width: min(24vw, 330px);
    font-size: clamp(20px, 1.75vw, 29px);
    line-height: 1.04;
  }
  .menu-footer {
    gap: 5px;
    padding: 14px 16px;
    border-radius: 17px 17px 17px 8px;
    font-size: 9px;
  }
  .menu-footer a { min-height: 27px; }
}

@media (max-width: 900px) {
  .menu-toggle,
  .menu-toggle[aria-expanded='true'] { min-width: 89px; min-height: 40px; }
  .site-menu { border-radius: 0 0 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-refraction .signal-core canvas { filter: saturate(1.55) contrast(1.12) brightness(.93) !important; }
}