/* Case study heroes: a quieter child of the homepage hero.
   Same dark green, vertical light lines, and the peach and mint glow sitting on the bottom edge. */
.cs-hero-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, #12211D 0%, #182C27 50%, #1D332E 100%);
}
.cs-hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 38% at 50% 104%, rgba(255, 168, 120, 0.75), rgba(255, 168, 120, 0.25) 55%, rgba(255, 168, 120, 0) 80%),
    radial-gradient(90% 30% at 50% 112%, rgba(255, 168, 120, 0.45), rgba(255, 168, 120, 0) 75%),
    radial-gradient(28% 70% at 50% 100%, rgba(110, 230, 180, 0.35), rgba(110, 230, 180, 0) 75%),
    radial-gradient(90% 55% at 50% 0%, rgba(14, 26, 22, 0.7), rgba(14, 26, 22, 0) 65%);
}
.cs-hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, rgba(255,255,255,0) 1px 5px),
    repeating-linear-gradient(90deg, rgba(4, 12, 10, 0.18) 0 2px, rgba(4, 12, 10, 0) 2px 9px);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 100%, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.12) 85%, transparent 100%);
          mask-image: radial-gradient(70% 80% at 50% 100%, #000 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.12) 85%, transparent 100%);
  mix-blend-mode: soft-light;
}
.cs-hero-band .cs-hero { position: relative; z-index: 1; }

/* Pill nav, matching the homepage: floating, see-through, blurred, edges on the content grid */
nav.top {
  top: 14px; left: 32px; right: 32px;
  max-width: var(--container);
  margin: 0 auto;
  height: 58px;
  padding: 0 25px;
  border: 1px solid rgba(242, 242, 239, 0.14);
  border-radius: 999px;
  background: rgba(18, 33, 29, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px -14px rgba(6, 14, 12, 0.5);
}
nav.top .logo, nav.top .back { color: #F2F2EF; }
nav.top .back:hover { color: #fff; }
@media (max-width: 768px) { nav.top { left: 20px; right: 20px; padding: 0 20px; } }