/* The hero map has its own visual system so the surrounding editorial palette stays intact. */
.hero-diagram[data-fiber-map] {
  --fiber-ice: var(--paper-2);
  --fiber-blue: var(--cobalt-soft);
  --fiber-blue-deep: var(--cobalt);
  --fiber-idle: rgba(167, 189, 247, .2);
  position: relative;
  height: clamp(460px, 38vw, 560px);
  min-height: 460px;
  overflow: hidden;
  border: 1px solid rgba(167, 189, 247, .31);
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(47, 91, 213, .54) 0%, rgba(27, 49, 85, .34) 30%, transparent 57%),
    radial-gradient(ellipse at 50% 50%, var(--navy-2) 0%, var(--navy) 72%, #10223f 100%);
  box-shadow: -24px 25px 0 rgba(20, 35, 63, .13), 0 18px 42px rgba(16, 34, 63, .1);
  color: var(--paper-2);
  isolation: isolate;
  user-select: none;
}

.hero-diagram[data-fiber-map]::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: radial-gradient(ellipse at 50% 52%, transparent 0 29%, rgba(167, 189, 247, .045) 50%, transparent 78%);
  pointer-events: none;
}

.hero-diagram[data-fiber-map]::after {
  position: absolute;
  inset: 8px;
  z-index: 4;
  border: 1px solid rgba(229, 235, 241, .08);
  content: "";
  pointer-events: none;
}

.hero-diagram[data-fiber-map] .diagram-lines {
  z-index: 1;
  overflow: visible;
}

.hero-diagram[data-fiber-map] .fiber-route {
  color: var(--fiber-blue);
}

.hero-diagram[data-fiber-map] .fiber-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 34;
  stroke-linecap: round;
  stroke-dasharray: none;
  pointer-events: stroke;
}

.hero-diagram[data-fiber-map] .fiber-strand,
.hero-diagram[data-fiber-map] .fiber-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
}

.hero-diagram[data-fiber-map] .fiber-strand {
  stroke: var(--fiber-idle);
  stroke-width: .9;
  opacity: .7;
  transition: stroke .28s ease, opacity .28s ease, filter .28s ease;
}

.hero-diagram[data-fiber-map] .fiber-strand--core {
  stroke: rgba(167, 189, 247, .31);
  stroke-width: 1.15;
  opacity: .78;
}

.hero-diagram[data-fiber-map] .fiber-pulse {
  display: none;
  stroke: url(#fiber-gradient);
  stroke-width: 1.8;
  stroke-dasharray: 1.6 21;
  opacity: 0;
}

.hero-diagram[data-fiber-map] .fiber-endpoint {
  fill: rgba(47, 91, 213, .14);
  stroke: rgba(167, 189, 247, .28);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  opacity: .7;
  transition: fill .28s ease, stroke .28s ease, opacity .28s ease, filter .28s ease;
}

.hero-diagram[data-fiber-map] .fiber-route.is-active .fiber-strand {
  stroke: rgba(167, 189, 247, .73);
  opacity: 1;
  filter: url(#fiber-glow);
}

.hero-diagram[data-fiber-map] .fiber-route.is-active .fiber-strand--core {
  stroke: var(--fiber-ice);
  opacity: 1;
}

.hero-diagram[data-fiber-map] .fiber-route.is-active .fiber-pulse {
  display: block;
  opacity: .98;
  filter: url(#fiber-glow);
}

.hero-diagram[data-fiber-map] .fiber-pulse--forward {
  animation: fiber-pulse-forward 2.1s linear infinite;
}

.hero-diagram[data-fiber-map] .fiber-pulse--reverse {
  animation: fiber-pulse-reverse 2.45s linear infinite;
  animation-delay: -1.1s;
  opacity: .8;
}

@keyframes fiber-pulse-forward {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -45; }
}

@keyframes fiber-pulse-reverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 45; }
}

.hero-diagram[data-fiber-map] .diagram-node {
  z-index: 3;
  min-width: 156px;
  padding: 15px 16px 16px;
  border: 1px solid rgba(167, 189, 247, .38);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(27, 49, 85, .96), rgba(16, 34, 63, .97));
  box-shadow: inset 0 1px 0 rgba(251, 250, 245, .1), 0 12px 25px rgba(16, 34, 63, .22);
  color: rgba(251, 250, 245, .9);
  transition: transform .24s ease, border-color .24s ease, background .24s ease, color .24s ease, box-shadow .24s ease;
}

.hero-diagram[data-fiber-map] .diagram-node:not(.diagram-center)::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(229, 235, 241, .08);
  content: "";
  pointer-events: none;
}

.hero-diagram[data-fiber-map] .diagram-node:not(.diagram-center) > span {
  color: rgba(167, 189, 247, .68);
  font-size: .56rem;
  letter-spacing: .1em;
}

.hero-diagram[data-fiber-map] .diagram-node strong {
  color: rgba(251, 250, 245, .94);
  font-size: 1.22rem;
}

.hero-diagram[data-fiber-map] .diagram-node small {
  color: rgba(229, 235, 241, .7);
  font-size: .65rem;
}

.hero-diagram[data-fiber-map] .diagram-node:hover,
.hero-diagram[data-fiber-map] .diagram-node:focus-visible,
.hero-diagram[data-fiber-map] .diagram-node.is-active {
  transform: translateY(-5px);
  border-color: var(--fiber-blue);
  background: linear-gradient(145deg, rgba(47, 91, 213, .98), rgba(27, 49, 85, .98));
  box-shadow: inset 0 1px 0 rgba(251, 250, 245, .25), 0 0 0 1px rgba(47, 91, 213, .14), 0 14px 30px rgba(16, 34, 63, .34), 0 0 28px rgba(47, 91, 213, .26);
  color: var(--paper-2);
}

.hero-diagram[data-fiber-map] .diagram-node:hover:not(.diagram-center) > span,
.hero-diagram[data-fiber-map] .diagram-node:focus-visible:not(.diagram-center) > span,
.hero-diagram[data-fiber-map] .diagram-node.is-active:not(.diagram-center) > span {
  color: var(--fiber-ice);
}

.hero-diagram[data-fiber-map] .diagram-node:hover small,
.hero-diagram[data-fiber-map] .diagram-node:focus-visible small,
.hero-diagram[data-fiber-map] .diagram-node.is-active small {
  color: rgba(229, 235, 241, .8);
}

.hero-diagram[data-fiber-map] .diagram-center {
  top: 50%;
  left: 50%;
  width: 178px;
  height: 120px;
  min-width: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(20, 35, 63, .64);
  background: linear-gradient(145deg, #c5c4c0 0%, var(--paper-2) 47%, #aaaeb5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -14px 25px rgba(20, 35, 63, .18), 0 0 0 5px rgba(167, 189, 247, .06), 0 17px 28px rgba(16, 34, 63, .3);
}

.hero-diagram[data-fiber-map] .diagram-center:hover,
.hero-diagram[data-fiber-map] .diagram-center:focus-visible {
  transform: translate(-50%, -55%);
  background: linear-gradient(145deg, #d1d0cb 0%, var(--paper-2) 47%, #b7bac0 100%);
}

.hero-diagram[data-fiber-map] .diagram-center .holdings-art {
  position: relative;
  display: block;
  width: 137px;
  height: 55px;
  max-width: 82%;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: multiply;
}

.hero-diagram[data-fiber-map] .diagram-center .holdings-art img {
  position: absolute;
  top: -22%;
  left: -7%;
  display: block;
  width: 114%;
  max-width: none;
  height: auto;
  mix-blend-mode: normal;
  filter: none;
}

.hero-diagram[data-fiber-map] .diagram-footnote {
  position: absolute;
  display: flex;
  align-items: center;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 5;
  border-top-color: rgba(229, 235, 241, .14);
  color: rgba(229, 235, 241, .66);
}

.hero-diagram[data-fiber-map] .diagram-footnote i {
  background: rgba(167, 189, 247, .7);
  box-shadow: 0 0 9px rgba(47, 91, 213, .22);
}

.hero-diagram[data-fiber-map] .node-signals { top: 9%; left: 6%; }
.hero-diagram[data-fiber-map] .node-systems { top: 9%; right: 5%; }
.hero-diagram[data-fiber-map] .node-assets { right: 5%; bottom: 10%; }
.hero-diagram[data-fiber-map] .node-teams { bottom: 10%; left: 6%; }

@media (max-width: 1160px) {
  .hero-diagram[data-fiber-map] {
    height: clamp(450px, 58vw, 540px);
  }
}

@media (max-width: 700px) {
  .hero-diagram[data-fiber-map] {
    height: 430px;
    min-height: 430px;
    box-shadow: 11px 11px 0 rgba(20, 35, 63, .12), 0 14px 28px rgba(16, 34, 63, .1);
  }

  .hero-diagram[data-fiber-map] .diagram-node {
    min-width: 112px;
    padding: 10px 9px 11px;
  }

  .hero-diagram[data-fiber-map] .diagram-node strong {
    font-size: .98rem;
  }

  .hero-diagram[data-fiber-map] .diagram-node:not(.diagram-center) > span,
  .hero-diagram[data-fiber-map] .diagram-node small {
    font-size: .58rem;
  }

  .hero-diagram[data-fiber-map] .diagram-center {
    width: 130px;
    height: 86px;
    min-height: 86px;
  }

  .hero-diagram[data-fiber-map] .diagram-center .holdings-art {
    width: 103px;
    height: 41px;
  }

  .hero-diagram[data-fiber-map] .diagram-footnote {
    right: 12px;
    bottom: 12px;
    left: 12px;
    font-size: .58rem;
  }

  .hero-diagram[data-fiber-map] .node-signals { top: 7%; left: 3%; }
  .hero-diagram[data-fiber-map] .node-systems { top: 7%; right: 3%; }
  .hero-diagram[data-fiber-map] .node-assets { right: 3%; bottom: 9%; }
  .hero-diagram[data-fiber-map] .node-teams { bottom: 9%; left: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-diagram[data-fiber-map] .fiber-pulse {
    animation: none !important;
  }
}