<style>

/* ============================================================
   INTERACTIVE SERVICE DECISION MAP
   ============================================================ */

.circuitry-decision-map {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
}

.circuitry-map-stage {
  position: relative;
  width: 100%;
}

.circuitry-map-image {
  display: block;
  width: 100%;
  height: auto;
}

.circuitry-hotspot-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.circuitry-hotspot {
  --hotspot-color: #22aaff;

  position: absolute;
  display: block;

  box-sizing: border-box;

  pointer-events: auto;

  border: 2px solid transparent;
  border-radius: 12px;

  cursor: pointer;
  text-decoration: none;

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.circuitry-hotspot--blue {
  --hotspot-color: #22aaff;
}

.circuitry-hotspot--teal {
  --hotspot-color: #18d8da;
}

.circuitry-hotspot--green {
  --hotspot-color: #76e83e;
}

.circuitry-hotspot--purple {
  --hotspot-color: #a85cff;
}

.circuitry-hotspot--orange {
  --hotspot-color: #ffa51f;
}


@media (hover:hover) and (pointer:fine) {

  .circuitry-hotspot:hover {
    border-color: var(--hotspot-color);

    background: rgba(255,255,255,.04);

    box-shadow:
      0 0 8px var(--hotspot-color),
      0 0 20px rgba(34,170,255,.25);
  }

}

/* ============================================================
   KEYBOARD ACCESSIBILITY
   ============================================================ */

.circuitry-hotspot:focus-visible {

  border-color: var(--hotspot-color);

  outline: 3px solid #ffffff;
  outline-offset: 3px;

  background:
    color-mix(
      in srgb,
      var(--hotspot-color) 8%,
      transparent
    );

}


/* ============================================================
   TOOLTIP
   ============================================================ */

.circuitry-tooltip {
  position: absolute;

  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 22px;

  color: #ffffff;

  background: rgba(3,16,30,.94);

  border: 2px solid var(--hotspot-color);
  border-radius: 12px;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;

  z-index: 20;
}

.circuitry-tooltip__title {
  display: block;

  margin-bottom: 9px;

  color: #ffffff;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}

.circuitry-tooltip__description {
  display: block;

  color: #d7e1ec;

  font-size: 14px;
  line-height: 1.4;
}

.circuitry-tooltip__cta {
  display: block;

  margin-top: 10px;

  color: var(--hotspot-color);

  font-size: 13px;
  font-weight: 700;
}

@media (hover:hover) and (pointer:fine) {

  .circuitry-hotspot:hover .circuitry-tooltip {
    opacity: 1;
    visibility: visible;
  }

}

.circuitry-hotspot:focus-visible .circuitry-tooltip {
  opacity: 1;
  visibility: visible;
}

@media (max-width:767px) {

  .circuitry-tooltip {
    display: none;
  }

}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  /*
     On mobile:
     - No tooltip
     - Tap hotspot goes directly to destination
  */

  .circuitry-tooltip {
    display: none;
  }

  .circuitry-hotspot {
    border-radius: 7px;
  }

}

</style>