/* Interactive tool rain from the About hero to the How Haajri helps surface. */
.about-tool-page,
.about-tool-surface { position: relative; }
.about-tool-surface { isolation: isolate; }
.about-tool-page > .section { position: relative; z-index: 1; }
.about-tool-runway {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.about-tool {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--tool-size);
  max-width: none;
  height: auto;
  opacity: .9;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: transform;
  filter: drop-shadow(0 8px 10px rgba(12, 18, 34, .14));
}
.about-tool.is-dragging { cursor: grabbing; opacity: 1; }
.about-tool-01 { --tool-size: 112px; }.about-tool-02 { --tool-size: 82px; }.about-tool-03 { --tool-size: 92px; }.about-tool-04 { --tool-size: 86px; }.about-tool-05 { --tool-size: 98px; }.about-tool-06 { --tool-size: 93px; }.about-tool-07 { --tool-size: 112px; }.about-tool-08 { --tool-size: 88px; }.about-tool-09 { --tool-size: 98px; }.about-tool-10 { --tool-size: 80px; }
@media (max-width: 991px) { .about-tool-01, .about-tool-07 { --tool-size: 88px; } .about-tool-03, .about-tool-09 { --tool-size: 76px; } .about-tool-02, .about-tool-04, .about-tool-05, .about-tool-06, .about-tool-08, .about-tool-10 { --tool-size: 66px; } }
@media (max-width: 640px) {
  .about-tool { --tool-size: 46px !important; }
  .about-tool-01, .about-tool-04, .about-tool-06, .about-tool-09 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .about-tool { will-change: auto; } }